Animation 案例解释

 
Animation 案例解释: ------------摘自W3c  
  
  
.demo1 {


        -webkit-animation-name:‘wobble‘;/*动画属性名，也就是我们前面keyframes定义的动画名*/
        -webkit-animation-duration: 10s;/*动画持续运行的时间*/
        -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
        -webkit-animation-delay: 2s;/*动画延迟时间*/
        -webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/
        
        -webkit-animation-direction: alternate;/*定义动画方式*/
        
        已定义动画方式详细解释如下：
        
        http://www.w3school.com.cn/cssref/pr_animation-direction.asp
     
  }
  
  

@-webkit-keyframes wobble {
    
    0%        {left:0px}
    20%        {left:10px}
    40%        {left:20px}
    60%        {left:30px}
    80%        {left:40px}
    100%    {left:50px}

}
  

/* img 放大 */

.sc{
    width:100px;
    height:100px;
    display:block;
    background:url(naruto.jpg) no-repeat;
    transition:all .3s ease;
    margin-left:30px;
}
.sc:hover{
    -webkit-transform:scale(1.5);
}