Я довольно много читал об этом, но изо всех сил пытался осмыслить это. Я могу найти множество способов анимировать свойства div на :hover, но я не могу найти способ просто анимировать свойства без какого-либо взаимодействия с пользователем.

Может кто-нибудь показать мне, как заставить div пульсировать, то есть анимировать свойство box-shadow.

Что-то типа

box-shadow: 0px 0px 10px #F00;

К

box-shadow: 0px 0px 20px #00F;

Большое спасибо.

1
Jimmery 6 Фев 2014 в 19:11
1
 – 
stackErr
6 Фев 2014 в 19:13
Найдите «Ключевые кадры CSS3».
 – 
Bram Vanroy
6 Фев 2014 в 19:17

1 ответ

Лучший ответ

Вы можете сделать это с помощью ключевых кадров:

div{
    height: 100px;
    -moz-animation-duration: 0.5s;
      -webkit-animation-duration: 0.5s;
      -moz-animation-name: changeShadow;
      -webkit-animation-name: changeShadow;
      -moz-animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
      -moz-animation-direction: alternate;
      -webkit-animation-direction: alternate;
    border: 1px solid black;
}
@-webkit-keyframes changeShadow{
  from {
    box-shadow: 0px 0px 10px #F00;
  }

  to {
    box-shadow: 0px 0px 20px #00F;
  }
}
@-moz-keyframes changeShadow{
  from {
    box-shadow: 0px 0px 10px #F00;
  }

  to {
    box-shadow: 0px 0px 20px #00F;
  }
}

Вот скрипка: http://jsfiddle.net/dc4f2/

2
stackErr 6 Фев 2014 в 19:29