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

Опубликовано: 4 сентября 2016 Обновлено: 30 апреля 2019 0 комментариев

Анимированные переходы — альтернатива несложной анимации. С помощью 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;
}

Поделиться: