CSS3 过渡 - 用不同的盒子阴影使盒子跳动

Question

我已经阅读了很多关于此的内容，但一直在努力理解它。我可以在:hover 上找到很多方法来为 div 的属性设置动画，但无论如何我都找不到在没有任何用户交互的情况下让属性动画。

谁能告诉我如何让一个 div 跳动，即为 box-shadow 属性设置动画。

类似

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

到

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

非常感谢。

Answer 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/