diff options
Diffstat (limited to 'files/ru/web/css/css_transitions/using_css_transitions/index.html')
| -rw-r--r-- | files/ru/web/css/css_transitions/using_css_transitions/index.html | 14 |
1 files changed, 7 insertions, 7 deletions
diff --git a/files/ru/web/css/css_transitions/using_css_transitions/index.html b/files/ru/web/css/css_transitions/using_css_transitions/index.html index fe9483eea9..69572dcdd2 100644 --- a/files/ru/web/css/css_transitions/using_css_transitions/index.html +++ b/files/ru/web/css/css_transitions/using_css_transitions/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions --- <p>{{CSSref}}{{SeeCompatTable}}</p> -<p><span class="seoSummary"><strong>CSS transitions</strong> предоставляют способ контролировать скорость анимации, при изменении CSS свойств. Вместо того, чтобы свойство применилось сразу, вы можете сделать это действие происходящим в течение какого-то момента времени. Например, если вы смените цвет элемента с белого на чёрный, изменение произойдёт моментально, а вот с CSS transitions, измения произойдут за временные интервалы, следующих кривой ускорения, все из которых могут быть настроены.</span></p> +<p><span class="seoSummary"><strong>CSS transitions</strong> предоставляют способ контролировать скорость анимации, при изменении CSS свойств. Вместо того, чтобы свойство применилось сразу, вы можете сделать это действие происходящим в течение какого-то момента времени. Например, если вы смените цвет элемента с белого на чёрный, изменение произойдёт моментально, а вот с CSS transitions, изменения произойдут за временные интервалы, следующих кривой ускорения, все из которых могут быть настроены.</span></p> <p>Анимации, составляющие переход между двумя состояниями, часто называют <em>неявными переходами</em>, так как промежуточные состояния в период между начальным и конечным состоянием неявно определяются браузером.<img alt="A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions." src="/files/4529/TransitionsPrinciple.png" style="display: block; height: 196px; margin: auto; width: 680px;"></p> @@ -56,7 +56,7 @@ translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions <p>{{ EmbedLiveSample('Пример_анимирования_нескольких_свойств', 600, 300) }}</p> -<h2 id="CSS_свойства_опредяющие_переходы">CSS свойства, опредяющие переходы</h2> +<h2 id="CSS_свойства_определяющие_переходы">CSS свойства, определяющие переходы</h2> <p>CSS переходы контролируются свойством<a href="https://developer.mozilla.org/en-US/docs/CSS/transition"> </a>{{cssxref("transition")}}. Это лучший способ их настроить, позволяет избежать длинных свойств и их несоответствий, которые могут сделать отладку CSS долгой.</p> @@ -907,7 +907,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <h2 id="Когда_у_списков_значений_свойств_разные_длины">Когда у списков значений свойств разные длины</h2> -<p>Если любой список свойств короче, чем другие, его значения повторяюся, чтобы сделать его длину как и у других. Например:</p> +<p>Если любой список свойств короче, чем другие, его значения повторяются, чтобы сделать его длину как и у других. Например:</p> <pre class="brush: css">div { transition-property: opacity, left, top, height; @@ -938,7 +938,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <h2 id="Простой_пример">Простой пример</h2> -<p>Пример 4 секунды выполняет плавное измение шрифта за 2 секунды, после того как пользователь навел мышь на элемент:</p> +<p>Пример 4 секунды выполняет плавное изменение шрифта за 2 секунды, после того как пользователь навел мышь на элемент:</p> <pre class="brush: css">#delay1 { position: relative; @@ -960,7 +960,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <p>Они часто используются для подсвечения элементов в меню при наведении мыши. С помощью переходов легко сделать такой эффект более привлекательным.</p> -<p>Перед тем, как вы посмотрите на код, возможно захотите <a href="https://codepen.io/anon/pen/WOEpva">посмотреть на живое демо</a> (считаем, что ваш браузер поддерживает переходы). Также можеть <a href="/samples/cssref/transitions/sample2/transitions.css">посмотреть на CSS</a>, используемый этим примером.</p> +<p>Перед тем, как вы посмотрите на код, возможно захотите <a href="https://codepen.io/anon/pen/WOEpva">посмотреть на живое демо</a> (считаем, что ваш браузер поддерживает переходы). Также может <a href="/samples/cssref/transitions/sample2/transitions.css">посмотреть на CSS</a>, используемый этим примером.</p> <p>Сначала зададим меню в HTML:</p> @@ -1026,7 +1026,7 @@ document.addEventListener('click', function(ev){ },false); </pre> -<p>C помощью CSS сглаживаем эффект без дополнительных усилий. Просто добавляем переход и любое измение свойств происходит плавно:</p> +<p>C помощью CSS сглаживаем эффект без дополнительных усилий. Просто добавляем переход и любое изменение свойств происходит плавно:</p> <pre class="brush: css">p { padding-left: 60px; @@ -1142,7 +1142,7 @@ document.addEventListener('click', function(ev){ </table> </div> -<p>[1] Chrome 1.0, WebKit 3.2 и Android 2.1 выполняют нестрандартное событие <code>webkitTransitionEnd</code>. Chrome 26.0 и WebKit 6.0 придерживаются стандарта <code>transitionend</code>.</p> +<p>[1] Chrome 1.0, WebKit 3.2 и Android 2.1 выполняют нестандартное событие <code>webkitTransitionEnd</code>. Chrome 26.0 и WebKit 6.0 придерживаются стандарта <code>transitionend</code>.</p> <p>[2] Opera 10.5 и Opera Mobile 10 поддерживают <code>oTransitionEnd</code>, версия 12 понимает <code>otransitionend, а</code> версия 12.10 знает стандарт <code>transitionend</code>.</p> |