Animation 案例解释

 
Animation 案例解释: ------------摘自W3c  
  
过度动画类型：

　　　　　linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
        ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
        ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
        ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
        ease-in-out：由慢到快

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

　　　　代码缩写：

　　　　animation:myfirst 5s linear 2s infinite alternate;

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

}

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:mymove 5s infinite;

-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/

}

@keyframes mymove

{

from {left:0px;}

to {left:200px;}

}

 

/* 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);
}

 

 

旋转
.scale{

width:50px;

height:50px;

background:#f00;

color:#fff;

border-radius:5px 5px;

padding:5px;
margin-left:100px;

-webkit-transition:all .5s  ease;
border:1px solid #000;
background:url(naruto.jpg)

}


.scale:hover{
transform:rotate(360deg);
}