CSS3 动画

1

@keyframes	             规定动画。

animation-name: change; /*规定 @keyframes 动画的名称。*/
animation-duration:2s; /*规定动画完成一个周期所花费的秒或毫秒。默认是 0。*/
animation-timing-function:ease; /*规定动画的速度曲线。默认是 "ease"。*/
animation-delay:0s; /*规定动画何时开始。默认是 0s。*/
animation-iteration-count:1; /*规定动画被播放的次数。默认是 1。【 infinite 无限次】*/
animation-direction:alternate; /*规定动画是否在下一周期逆向地播放。默认是 "normal"。【alternate 逆向循环】*/
animation-play-state:running; /*规定动画是否正在运行或暂停。默认是 "running"。【可以设置添加了动画的css样式设置动画停止 播放】 <br>*/
animation-fill-mode:backwards; /*规定对象动画时间之外的状态。动画执行完的转态 【回到初始转态backwards 保持最后的转态forwards】*/
animation-timing-function:linear; /*从一个动画到下一个动画时间是均匀变化的*/

============================例子=================================================
定义动画
@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}//设置相关样式
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
使用动画
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}

　　1：动画的停止与播放

  1.1html

<div style="200px;height:200px;background-color:#0094ff">
        <img src="img/cc.png" class="myImg" id="img1"/>
        <img src="img/cc.png" class="myImg1" />
        <img src="img/cc.png" class="myImg" />
        <img src="img/cc.png" class="myImg1" />
        <img src="img/cc.png" class="myImg" />
        <img src="img/cc.png" class="myImg1" />
        
    </div>

　　1.2 js

<script type="text/javascript">

        $(function () {
            $("#img1").mouseover(function () {             
                $(this).css({ "animation-play-state": "paused" });//鼠标移动上此元素是就将动画停止
            }).mouseout(function () {
                $(this).css({ "animation-play-state": "running" });//鼠标移开时重新开始动画
            })
        })
    </script>

　　1.3 CSS

 <style type="text/css">
        @keyframes MyAnimation{
             0% {top:0px;left:0px;}
            10% {top:20px;left:0px;}
            20% {top:40px;left:0px;}
            30% {top:60px;left:0px;}
            40% {top:80px;left:0px;}
            50% {top:100px;left:0px;}
            60% {top:120px;left:0px;}
            70% {top:140px;left:0px;}
            80% {top:160px;left:0px;}
            90% {top:180px;left:0px;}
            100% {top:200px;left:0px;}
        }
         @keyframes MyAnimation1{
             100% {top:50px;left:0px;}
            90% {top:20px;left:0px;}
            80% {top:40px;left:0px;}
            70% {top:60px;left:0px;}
            60% {top:80px;left:0px;}
            50% {top:100px;left:0px;}
            40% {top:120px;left:0px;}
            30% {top:140px;left:0px;}
            20% {top:160px;left:0px;}
            10% {top:180px;left:0px;}
            0% {top:200px;left:0px;}
        }
        .myImg {
        position:relative;
        animation-name: MyAnimation;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-delay: 0s;
        animation-iteration-count: infinite;
        animation-direction: normal;
        animation-play-state: running;
        }
        .myImg1 {
        position:relative;
        animation-name: MyAnimation1;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-delay: 0s;
        animation-iteration-count: 1;
        animation-direction: normal;
        animation-play-state:running;
        animation-fill-mode:forwards;
        }
       
    </style>

　　抛物线设置：

http://cubic-bezier.com/#.05,.87,0,1.59

animation-timing-function: cubic-bezier(.05, .87, 0, 1.59)