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

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

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

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

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

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #F5F5F5;
  box-shadow: 0 0 0 5px #F8B83C, 0 0 0 10px #EB7722;
  transition: border-radius 1s linear, box-shadow 1s 1s ease-in-out, transform 1s 2s linear, background 1s 3s linear;
}
div:hover {
  border-radius: 0;
  box-shadow: 0 0 0 10px #F8B83C, 0 0 0 25px #EB7722;
  transform: scale(1.1) rotate(45deg);
  background: #DACFCB;
}

Поделиться: