⑤ Краткая запись перехода transition и плавный переход нескольких свойств

Продолжим изучение темы CSS3 - переходы. Если пропустили прошлые статьи, то вот ссылки на них:

• ① Название свойства transition-property
• ② Продолжительность перехода transition-duration
• ③ Функция перехода transition-timing-function
• ④ Задержка перехода transition-delay

Краткая запись перехода

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

Если воспользоваться значениями по умолчанию, то запись

CSS

div {transition: 1s;}

будет эквивалентна

CSS

div {transition: all 1s ease 0s;}

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

Для элемента можно задать несколько последовательных переходов, перечислив их через запятую. Каждый переход можно оформить своей временной функцией.

CSS

div {transition: background 0.3s ease, color 0.2s linear;}

или

CSS

div {
transition-property: height, width, background-color;
transition-duration: 3s;
transition-timing-function: ease-in, ease, linear;
}

Продолжение в следующей статье!