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>