Вероятно, вы знаете, что transition определяется в CSS следующим образом:
.example { transition: background-color .5s ease-out; }
Или может быть использовали длинную форму записи:
.example { transition-property: background-color; transition-duration: .5s; transition-timing-function: ease-out; }
В обоих случаях мы явного определяли три из четырех параметров, связанных с transition (кроме transition-delay).
Можно ли использовать transition с меньшим количество кода? Конечно! Ниже приведен минимальный код для transition:
.example { transition: 4s; }
В этом сокращении единственное, что определяется — это время.
Результат можно посмотреть здесь: демонстрация codepen
Спасибо за внимание!
Подписывайтесь на рассылку! 😉