CSS transition

Атрибут transition

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

Атрибут transition позволяет анимировать изменение значений CSS-атрибутов в течение заданного интервала времени

Изменение значений CSS-атрибутов происходит в результате определенного события

и может быть описано псевдоклассом,

например, :hover

Переходы применяются ко всем элементам, а также к псевдоэлементам :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>