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);

}