Анимированные переходы

Анимированные переходы — альтернатива несложной анимации. С помощью CSS3 переходов можно изменять различные характеристики одного элемента одновременно, устанавливая задержку во времени для каждого последующего свойства, а также свою функцию перехода. Такой приём можно использовать как в состоянии :hover, так и в :focus, :checked и т.д.

Наведите на круг, чтобы увидеть анимированные переходы в действии.

See the Pen BLyojv by Elena (@html5book) on CodePen.

Блок последовательно изменяет значения своих свойств, а время задержки складывается последовательно из времени перехода предыдущего свойства.