标签：属性 直播 nim charset anim har 20px blog top
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 </head> 8 <body> 9 <div></div> 10 </body> 11 </html>
1 div{ 2 width: 300px; 3 height: 200px; 4 background-color: red; 5 animation-name: myanimation; 6 animation-duration: 3s; 7 animation-timing-function: ease; 8 animation-delay: 1s; 9 animation-iteration-count: 3/*infinite*/;/*infinite一直播放*/ 10 animation-direction: alternate; /*normal*/;/*规定动画下一周期的播放顺序，即奇数次的播放顺序：normal默认顺序播放，alternate逆序播放*/ 11 animation-fill-mode: both;/*默认none，动画会停在初始状态。forwards属性值会使动画停在最后一帧状态。backwards会立即切换到第1帧再执行animation-delay延时。both会同时应用forwards和backwards属性值。*/ 12 animation: ;/*所有具体属性值都可以设置在简写属性名中，每个属性值之间用空格分隔*/ 13 } 14 @keyframes myanimation{ 15 /* from{ 16 width: 150px; 17 height: 100px; 18 background-color: blue; 19 } 20 to{ 21 width: 200px; 22 height: 150px; 23 background-color: green; 24 }*/ 25 0%{ 26 margin-left: 20px; 27 background-color: pink; 28 } 29 20%{ 30 margin-left: 100px; 31 background-color: orange; 32 } 33 40%{ 34 margin-top: 100px; 35 background-color: yellow; 36 } 37 60%{ 38 margin-top: 200px; 39 background-image: grey; 40 } 41 100%{ 42 margin-right: 300px; 43 margin-top: 150px; 44 background:green; 45 } 46 }
【CSS3】动画animation-关键帧keyframes
标签：属性 直播 nim charset anim har 20px blog top
原文地址：http://www.cnblogs.com/xiongjiawei/p/6791398.html
