Минимальный код для CSS Transition

Вероятно, вы знаете, что 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

 

 

Спасибо за внимание!

Подписывайтесь на рассылку! 😉

 

Автор статьи: Alex. Категория: CSS
Дата публикации: 09.08.2013