Image Image Image Image Image Image Image Image Image Image

Блог Indigo | 15.11.2018

Наверх

Наверх

Сокращенная запись 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.