CSS transition

Свойство transition

плавный переход элемента в новое состояние

Когда изменяются значения свойств стиля, наблюдается непрятный резкий "скачок" при переходе элемента из одного состояния в другое:

Свойство transition позволяет сделать такой переход более плавным:

Для того, чтобы анимировать изменение значений CSS-свойств в течение определенного времени, нужно указать:

переход	анимируемое свойство	время анимации	задержка начала анимации	характер анимации
transition:	width	1s	0.5s	linear
transition:	font-size	0.5s		ease

Когда меняются значения CSS-свойств ?

Это может происходить при использовании псевдоклассов, например - :hover

Или в результате изменения размеров окна при установленных медиа-правилах @media

^{Переходы применяются ко всем элементам, а также к псевдоэлементам :before и :after}

property	comment
transition-property	название CSS-свойства, к которому будет применен эффект перехода Можно указать как одно свойство, так и перечень свойств через запятую Если указать значение all, то эффект перехода будет применяться ко всем свойствам стиля элемента
transition-duration	интервал времени ( сек ), в течение которого будет присходить переход Если разные свойства имеют разные значения для перехода, они указываются через запятую Если продолжительность перехода не указана, то анимация при смене значений свойств происходить не будет
transition-timing-function	Свойство задаёт способ анимации перехода: плавная анимация ( ease ) плавное начало ( ease-in ) плавное окончание ( ease-out ) плавное начало и плавное окончание ( ease-in-out ) линейная анимация перехода ( linear ) анимация перехода, описываемая функцией Безье ( cubic-bezier ) Если определять переходы для нескольких свойств стиля, можно задавать различные способы анимации для каждого из них
transition-delay	Задержка перехода ( опционально ) Можно "отсрочить" начало перехода на заданное число секунд

1

.animated {
    width: 100px;
    height: 100px;
    background: green;
    transition-property: width;
    transition-duration: 0.5s;
    transition-delay: 0.2s;
    transition-timing-function: ease-in-out;
}
.animated:hover {
    width: 200px;
}

Все это можно объединить в одном атрибуте transition:

.animated {
    transition: width 0.5s 0.2s ease-in-out;
}
.animated:hover {
    width: 200px;
}

---

2

body { background: #000; }
.animated {
    position: fixed;
    top: calc(100vmin - 150px);
    left: calc(80vmin - 50px);
    width: 16vmin;
    height: 16vmin;
    border-radius: 50%;
    background: blue;
    transition: all 3s 0.2s cubic-bezier(1.0, -0.5, 0.5, 1.0);
}
body:hover .animated {
    transform: translate(-50vw, -70vh) scale(0.5);
}

---

3

:root {
    --transition-duration: 3s;
    --trasition-delay: 0s;
    --bezier--positive: cubic-bezier(1.0, 0.8, 0.0, 0.9);
    --bezier--negative: cubic-bezier(1.0, -0.5, 0.4, 1.5);
    --width: max-content;
    --height: max-content;
    font-family: Arial;
    background: black;
}
.animated {
    position: relative;
    width: var(--width);
    height: var(--height);
    margin: 3rem;
    white-space: nowrap;
    border: solid 1px;
    padding: 1rem 2rem;
    transition-property: all;
    transition-duration: var(--transition-duration);
    transition-delay: var(--trasition-delay);
    -webkit-font-smoothing: antialiased;
}
.container:hover .animated {
    transform: translate(70vw, 0);
}
.bezier-positive {
    color: yellow;
    transition-timing-function: var(--bezier--positive);
}
.bezier-negative {
    color: magenta;
    transition-timing-function: var(--bezier--negative);
}
.linear {
    color: cyan;
    transition-timing-function: linear;
}
.ease-in-out {
    color: green;
    transition-timing-function: ease-in-out;
}
.ease-out {
    color: red;
    transition-timing-function: ease-out;
}
.ease-in {
    color: orange;
    transition-timing-function: ease-in;
}
.ease {
    color: lightblue;
    transition-timing-function: ease-in;
}

<div class="container">
    <div class="animated ease">Ease</div>
    <div class="animated ease-in">Ease In</div>
    <div class="animated ease-out">Ease Out</div>
    <div class="animated ease-in-out">Ease In Out</div>
    <div class="animated linear">Linear</div>
    <div class="animated custom">cubic-bezier</div>
    <div class="animated negative">cubic-bezier negative</div>
</div>