47. CSS3 animation

animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和@keyframes定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。

语法：

animation-name: none | IDENT[,none|DENT]*;

1. IDENT 是由 @keyframes 创建的动画名，上面已经讲过了（animation-name 调用的动画名需要和@keyframes定义的动画名称完全一致）；
2. none 为默认值，当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。

注意：需要在 Chrome 和 Safari 上面的基础上加上-webkit-前缀，Firefox 加上-moz-。

实例演示

调用定义的动画“around”

HTML 代码：

<div><span></span></div>

CSS 代码：

@keyframes around{
  0% {
    transform: translateX(0);
  }
  25%{
    transform: translateX(180px);
  }
  50%{
     transform: translate(180px, 180px); 
  }
  75%{
    transform:translate(0,180px);
  }
  100%{
    transform: translateY(0);
  }
}
div {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 20px auto;
}
div span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: orange;
  border-radius: 100%;
  animation-name:around;
  animation-duration: 10s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-iteration-count:infinite;
}

效果如下：