From 55ddd4454665a3c66e3d5b186bc79048468d36e7 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 15 Mar 2021 14:29:50 +0300 Subject: Auto fixes --- .../css/css_transitions/using_css_transitions/index.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'files/ru/web/css/css_transitions') 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 ---

{{CSSref}}{{SeeCompatTable}}

-

CSS transitions предоставляют способ контролировать скорость анимации, при изменении CSS свойств. Вместо того, чтобы свойство применилось сразу, вы можете сделать это действие происходящим в течение какого-то момента времени. Например, если вы смените цвет элемента с белого на чёрный, изменение произойдёт моментально, а вот с CSS transitions, измения произойдут за временные интервалы, следующих кривой ускорения, все из которых могут быть настроены.

+

CSS transitions предоставляют способ контролировать скорость анимации, при изменении CSS свойств. Вместо того, чтобы свойство применилось сразу, вы можете сделать это действие происходящим в течение какого-то момента времени. Например, если вы смените цвет элемента с белого на чёрный, изменение произойдёт моментально, а вот с CSS transitions, изменения произойдут за временные интервалы, следующих кривой ускорения, все из которых могут быть настроены.

Анимации, составляющие переход между двумя состояниями, часто называют неявными переходами, так как промежуточные состояния в период между начальным и конечным состоянием неявно определяются браузером.A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions.

@@ -56,7 +56,7 @@ translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions

{{ EmbedLiveSample('Пример_анимирования_нескольких_свойств', 600, 300) }}

-

CSS свойства, опредяющие переходы

+

CSS свойства, определяющие переходы

CSS переходы контролируются свойством {{cssxref("transition")}}. Это лучший способ их настроить, позволяет избежать длинных свойств и их несоответствий, которые могут сделать отладку CSS долгой.

@@ -907,7 +907,7 @@ var intervalID = window.setInterval(updateTransition, 7000);

Когда у списков значений свойств разные длины

-

Если любой список свойств короче, чем другие, его значения повторяюся, чтобы сделать его длину как и у других. Например:

+

Если любой список свойств короче, чем другие, его значения повторяются, чтобы сделать его длину как и у других. Например:

div {
   transition-property: opacity, left, top, height;
@@ -938,7 +938,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
 
 

Простой пример

-

Пример 4 секунды выполняет плавное измение шрифта за 2 секунды, после того как пользователь навел мышь на элемент:

+

Пример 4 секунды выполняет плавное изменение шрифта за 2 секунды, после того как пользователь навел мышь на элемент:

#delay1 {
   position: relative;
@@ -960,7 +960,7 @@ var intervalID = window.setInterval(updateTransition, 7000);
 
 

Они часто используются для подсвечения элементов в меню при наведении мыши. С помощью переходов легко сделать такой эффект более привлекательным.

-

Перед тем, как вы посмотрите на код, возможно захотите посмотреть на живое демо (считаем, что ваш браузер поддерживает переходы). Также можеть посмотреть на CSS, используемый этим примером.

+

Перед тем, как вы посмотрите на код, возможно захотите посмотреть на живое демо (считаем, что ваш браузер поддерживает переходы). Также может посмотреть на CSS, используемый этим примером.

Сначала зададим меню в HTML:

@@ -1026,7 +1026,7 @@ document.addEventListener('click', function(ev){ },false);
-

C помощью CSS сглаживаем эффект без дополнительных усилий. Просто добавляем переход и любое измение свойств происходит плавно:

+

C помощью CSS сглаживаем эффект без дополнительных усилий. Просто добавляем переход и любое изменение свойств происходит плавно:

p {
   padding-left: 60px;
@@ -1142,7 +1142,7 @@ document.addEventListener('click', function(ev){
 
 
 
-

[1] Chrome 1.0, WebKit 3.2 и Android 2.1 выполняют нестрандартное событие  webkitTransitionEnd. Chrome 26.0 и WebKit 6.0 придерживаются стандарта transitionend.

+

[1] Chrome 1.0, WebKit 3.2 и Android 2.1 выполняют нестандартное событие  webkitTransitionEnd. Chrome 26.0 и WebKit 6.0 придерживаются стандарта transitionend.

[2] Opera 10.5 и Opera Mobile 10 поддерживают oTransitionEnd, версия 12 понимает otransitionend, а версия 12.10 знает стандарт transitionend.

-- cgit v1.2.3-54-g00ecf