CSS transition

🎓 Свойство transition

transition позволяет анимировать исходное значение CSS-свойства на новое значение с течением времени, управляя скоростью смены значений свойств.

Смена свойств происходит при наступлении определенного события, которое описывается соответствующим псевдоклассом.

Чаще всего используется псевдокласс :hover.

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

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

Все свойства, отвечающие за изменение внешнего вида элемента, можно объединить в одно свойство transition ({transition: transition-property transition-duration transition-timing-function transition-delay;}):

.link {
    color: white;
    transition: color 0.4s ease;
}

.link:hover {
    color: black;
}