CSS动画实用技巧

CSS3动画

Transform：对元素进行变形；
Transition：对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。但只有两个关键贞。开始，结束。
Animation：对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。可以设置多个关键贞。

Transition与Animation:
transition需要触发一个事件 ,而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。

实用动画技巧

animation-delay为负值

animation-delay:定义动画何时开始。

默认：0，立即执行动画
正值：延时指定时间后，开始执行动画
负值：立即执行，但跳过指定时间后进入动画

案例：

代码：

<style type="text/css">
        body{color: #fff;background: #222;}
        h5{font-size: 14px;font-family: "Microsoft Yahei"; text-align: center;}
        .spinner{width:80px;height:50px;margin:100px auto;text-align:center;}
        .spinner > div{display:inline-block;width:6px;height:100%;
            background:green;-webkit-animation: strechdelay 1.2s infinite ease-in-out ;}
        .spinner .line2{-webkit-animation-delay:-1.1s; }
        .spinner .line3{-webkit-animation-delay:-1.0s;}
        .spinner .line4{-webkit-animation-delay:-0.9s; }
        .spinner .line5{ -webkit-animation-delay:-0.8s;  }/**/
        @-webkit-keyframes strechdelay{
          0%,40%,100%{ -webkit-transform:scaleY(.4);}
          20%{-webkit-transform:scaleY(1); }
        }
    </style>
</head>
<body>
    <h5>请使用webkit内核标准浏览器查看效果</h5>
    <div class="spinner">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
      <div class="line4"></div>
      <div class="line5"></div>
    </div>
</body>