了解css3动画

首先，CSS Animation需要指定动画一个周期持续的时间，以及动画效果的名称。

语法：

animation: animation: name duration timing-function delay iteration-count direction fill-mode play-state;;

说明：

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。
animation-direction	指定是否应该轮流反向播放动画。

例如：

 #demo span{
    border-radius: 100%;
    -webkit-animation: rainbow 1s infinite;
    animation: rainbow 1s infinite;
  }

　　我们在这里给span添加动画效果，如：

  @keyframes rainbow {
    0% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    25% {
      -webkit-transform: scale(0.9, 0.9);
      transform: scale(0.9, 0.9);
      background: #93e1d7;
    }
    50% {
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);
      margin: 0 3px;
      background: #2FAC9B;
    }
    100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
  }

　　在html中添加，如下：

<div id='demo'><span><span></div>

　　然后在浏览器中，我们会看见如下效果:

 

 

　　然后，我们可以思考下，既然得到了一个这样的动画效果，那我们由多个圆点可以得到加载效果。

我们继续在上面代码中修改，html中添加：

<div id="loader-1">
  <span></span><span></span><span></span><span></span><span></span>
</div>

　　css中添加：

 #loader-1 span:nth-child(1) {
    border-radius: 100%;
    -webkit-animation: scale 1s 0.1s infinite;
    animation: scale 1s 0.1s infinite;
  }
  #loader-1 span:nth-child(2) {
    border-radius: 100%;
    -webkit-animation: scale 1s 0.2s infinite;
    animation: scale 1s 0.2s infinite;
  }
  #loader-1 span:nth-child(3) {
    border-radius: 100%;
    -webkit-animation: scale 1s 0.3s infinite;
    animation: scale 1s 0.3s infinite;
  }
  #loader-1 span:nth-child(4) {
    border-radius: 100%;
    -webkit-animation: scale 1s 0.4s infinite;
    animation: scale 1s 0.4s infinite;
  }
  #loader-1 span:nth-child(5) {
    border-radius: 100%;
    -webkit-animation: scale 1s 0.5s infinite;
    animation: scale 1s 0.5s infinite;
  }

　　然后添加对应的动画效果：

 @-webkit-keyframes scale {
    0% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    25% {
      -webkit-transform: scale(0.9, 0.9);
      transform: scale(0.9, 0.9);
      background: #93e1d7;
    }
    50% {
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);
      margin: 0 3px;
      background: #2FAC9B;
    }
    100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
  }
  @keyframes scale {
    0% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    25% {
      -webkit-transform: scale(0.9, 0.9);
      transform: scale(0.9, 0.9);
      background: #93e1d7;
    }
    50% {
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);
      margin: 0 3px;
      background: #2FAC9B;
    }
    100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    }
  }

　　然后我们继续在浏览器中打开，会看见如下效果：

 

     

综合上面类容，我们会发现，css3中动画效果博大精深，需要我们不停的学习。