Сокращенная запись transition
Все четыре свойства, которые мы рассмотрели на предыдущих страницах учебника, можно записать в одной строке, воспользовавшись универсальным свойством transition
. Это помогает сэкономить время и место, особенно учитывая тот факт, что кроме обычной записи требуется добавлять еще три её вариации с вендорными префиксами.
Порядок записи следующий: необходимо указать значения свойств transition-property, transition-duration, transition-timing-function и transition-delay, отделяя их пробелами. Пример:
transition: all 1s ease 0s;
В ситуации, когда необходимо записать несколько свойств transition-property и, соответственно, несколько значений transition-duration и т. д., запись будет выглядеть таким образом:
transition: color 1s ease-in 0s, background-color .5s step-end 0s, letter-spacing 2s ease-out 2s;
Проще говоря, значения для первого свойства вы записываете через пробел, после чего ставите запятую и указываете значения для второго свойства и так далее. В конце ставится точка с запятой.
Из четырех значений обязательно нужно указывать лишь два — transition-property и transition-duration. Для двух других свойств будут использованы значения по умолчанию, если вы не установите другие.
Далее в учебнике: анимация в CSS3.