CSS3 :animation 动画
CSS3动画分为二部份:
1、定义动画行为:
使用@keyframes定义动画行为,有两种方式:
方式一:仅定义动画起始样式,与动画结束样式
1 @keyframes (动画行为名称) 2 { 3 from {background: red;} 4 to {background: yellow;} 5 } 6 7 @-moz-keyframes (动画行为名称) 8 { 9 from {background: red;} 10 to {background: yellow;} 11 } 12 13 @-webkit-keyframes (动画行为名称) 14 { 15 from {background: red;} 16 to {background: yellow;} 17 } 18 19 @-o-keyframes (动画行为名称) 20 { 21 from {background: red;} 22 to {background: yellow;} 23 }
方式二:定义动画进展中的每步样式,百分比表示动画执行的进度百分值
1 @keyframes (动画行为名称) 2 { 3 0% {background: red;} 4 25% {background: yellow;} 5 50% {background: blue;} 6 100% {background: green;} 7 } 8 9 @-moz-keyframes (动画行为名称) 10 { 11 0% {background: red;} 12 25% {background: yellow;} 13 50% {background: blue;} 14 100% {background: green;} 15 } 16 17 @-webkit-keyframes (动画行为名称) 18 { 19 0% {background: red;} 20 25% {background: yellow;} 21 50% {background: blue;} 22 100% {background: green;} 23 } 24 25 @-o-keyframes (动画行为名称) 26 { 27 0% {background: red;} 28 25% {background: yellow;} 29 50% {background: blue;} 30 100% {background: green;} 31 }
2、定义动画执行方式。
将动画的行为附加到元素上,使其按照此规则执行动画效果,但我们还要给动画设定执行方式,比如什么动画让它多长时间完成,是否循环执行动画等。
动画执行方式语法:
1 animation: name duration timing-function delay iteration-count direction;
语法中译:
1 animation: 2 动画行为名称,在keyframes内定义的名称 3 动画周期,比如 5s 表示5秒完成此动画一次 4 动画的速度曲线, linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) 5 动画何时开始,默认值0,立刻播放 6 动画被播放的次数,默认值1,值infinite 表示一直循环播放 7 动画是否在下一周期逆向地播放,可选值: normal(默认,不逆向地播放) | alternate(动画应该轮流反向播放)
3、可以通过增加CSS样式:animation-play-state 来控制CSS3动画暂停与播放
1 animation-play-state: paused | running; 2 -webkit-animation-play-state: paused | running ;
代码演示:
1 <!DOCTYPE html> 2 <html lang="zh-cmn-Hans"> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 a{width:100px;height:30px;display:block;} 7 8 @keyframes myan{ 9 0% {background:#066;left:20px;top:20px;} 10 50% {background:#090;left:100px;top:100px;} 11 100% {background:#093;left:300px; top:300px;} 12 } 13 14 15 #a{ 16 position:absolute; 17 animation: myan 5s linear 2s infinite alternate; 18 } 19 20 #a:hover{ 21 /* 这里使动画停止了 */ 22 animation-play-state:paused; 23 } 24 </style> 25 </head> 26 27 <body> 28 <div style="position:relative;margin:50px;width:100px;height:100px;background:#ccc;"> 29 30 <a href="#" id="a">1111111</a> 31 </div> 32 33 </body> 34 </html>