diff --git a/guide/russian/css/using-css-transitions/index.md b/guide/russian/css/using-css-transitions/index.md index 713fff97b2f..88fc610e17d 100644 --- a/guide/russian/css/using-css-transitions/index.md +++ b/guide/russian/css/using-css-transitions/index.md @@ -4,8 +4,26 @@ localeTitle: Использование переходов CSS --- ## Использование переходов CSS -Это заглушка. [Помогите нашему сообществу расширить его](https://github.com/freecodecamp/guides/tree/master/src/pages/css/using-css-transitions/index.md) . +**CSS переходы** предоставляют способ контролировать скорость анимации, при изменении CSS свойств. Вместо того, чтобы свойство применилось сразу, вы можете сделать это действие происходящим в течение какого-то момента времени. Например, если вы смените цвет элемента с белого на чёрный, изменение произойдёт моментально, а вот с css переходами, измения произойдут за временные интервалы, следующих кривой ускорения, все из которых могут быть настроены. -[Это руководство по быстрому стилю поможет вам принять ваш запрос на тягу](https://github.com/freecodecamp/guides/blob/master/README.md) . +Анимации, составляющие переход между двумя состояниями, часто называют неявными переходами, так как промежуточные состояния в период между начальным и конечным состоянием неявно определяются браузером. -#### Дополнительная информация: \ No newline at end of file +В данном примере вы моежет видеть красный
элемент размерами 100px * 100px. Для этого элемента также задано свойство перехода для свойства `width` с длительностью в 2 секунды: + +```css +div { + width: 100px; + height: 100px; + background: red; + transition: width 2s; +} + +div:hover { + width: 300px; +} +``` +Если навести курсор мыши на этот элемент `div`, то вы увидите, что ширина этого элемента постепенно меняется в течение 2 секунд. +[Демо](https://codepen.io/anon/pen/GYedKV) + +#### Дополнительная информация: +[Подробная статья об использовании CSS переходов](https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)