30 lines
2.2 KiB
Markdown
30 lines
2.2 KiB
Markdown
---
|
||
title: Using CSS Transitions
|
||
localeTitle: Использование переходов CSS
|
||
---
|
||
## Использование переходов CSS
|
||
|
||
**CSS переходы** предоставляют способ контролировать скорость анимации, при изменении CSS свойств. Вместо того, чтобы свойство применилось сразу, вы можете сделать это действие происходящим в течение какого-то момента времени. Например, если вы смените цвет элемента с белого на чёрный, изменение произойдёт моментально, а вот с css переходами, измения произойдут за временные интервалы, следующих кривой ускорения, все из которых могут быть настроены.
|
||
|
||
Анимации, составляющие переход между двумя состояниями, часто называют неявными переходами, так как промежуточные состояния в период между начальным и конечным состоянием неявно определяются браузером.
|
||
|
||
В данном примере вы моежет видеть красный <div> элемент размерами 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)
|