css keyframes动画属性设置 

 1 <!DOCTYPE html>
 2 <html>
 3 <head> 
 4 <meta charset="utf-8">
 5 <title>css-keyframes</title>
 6 <link href="style.css" rel="stylesheet" type="text/css">
 7 </head> 
 8 <body>
 9 <div><span></span></div>
10 </body>
11 </html>
 1 @-webkit-keyframes move{    /*定义名为move的动画函数 目前chrome对其支持较好 所以加-webkit-前缀*/
 2   0%{                       /*时间达到0%时坐标位置为（0,0）*/
 3     transform:translate(0px,0px);/*应用该动画的标签位置为（0,0）*/
 4   }
 5   20%{
 6     transform:translate(100px,80px);
 7   }
 8   50%{
 9     transform:translate(200px,0px);
10   }
11   100%{
12     transform:translate(400px,80px);
13   }
14 }
15 div {
16   width: 300px;
17   height: 100px;
18   background: blue;
19   border:1px solid red;
20   margin: 20px 100px;
21 }
22 span{
23   display:inline-block;
24   width:20px;
25   height:20px;
26   border-radius:10px;
27   background:yellow;
28   -webkit-animation-name:move;/*调用move动画*/
29   -webkit-animation-duration:10s;/*move动画从0%到100%的用时，单位为s*/
30   -webkit-animation-timing-function:ease;/*表示动画播放方式 ease（速度由快到慢）linear（恒定速度）ease-in(加速变化
31 
32 ) ease-out(减速变化) ease-in-out(先加速在减速)*/
33   -webkit-animation-direction:normal;/*表示动画播放方向  normal（默认从0%到100%） alternate(偶数次从0%到100%，基数
34 
35 次100%到0%)*/
36   -webkit-animation-delay:2s;/*动画延时2秒播放*/
37   -webkit-animation-iteration-count:infinite;/*动画播放的次数  infinite表示无限次*/
38   -webkit-animation-play-state:running;/*播放还是paused*/
39   -webkit-animation-fill-mode:none;/*定义动画开始之前和结束之后发生的操作 none（动画结束时返回第一帧） forwards(动
40 
41 画结束后显示最后一帧) backwards（元素应用动画样式时迅速应用动画的第一帧） both（元素动画同时具有forwards和
42 
43 backwards效果）*/
44   
45 }

 

posted @ 2015-04-06 19:59  李辉健  阅读(3441)  评论(0)  编辑  收藏  举报