之前跟着慕课网的教程写了个侧边栏，发现他的动画效果是用css3去做的，今天特地去查了下下css3的动画部分，挺有意思的，试着做了个小demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { background: #666; font-family: 'Microsoft Yahei',sans-serif; font-size: 10px; } .sq{ width: 100px; height: 100px; border-radius: 50%; background: red; position: relative; float: left; text-align: center; font-size: 2rem; line-height: 100px; opacity: 0; -webkit-animation-name: mymove; animation-name: mymove; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: normal; animation-direction: normal; } #v1 { left: 0px; } #v2 { left: 200px; -webkit-animation-delay: .1s; animation-delay: .1s; } #v3 { left: 400px; -webkit-animation-delay: .2s; animation-delay: .2s; } #v4 { left: 600px; -webkit-animation-delay: .3s; animation-delay: .3s; } #v5 { left: 800px; -webkit-animation-delay: .4s; animation-delay: .4s; } #v6 { left: 1000px; -webkit-animation-delay: .5s; animation-delay: .5s; } #v7 { left: 1200px; -webkit-animation-delay: .6s; animation-delay: .6s; } @-webkit-keyframes mymove { 0%{ top: 0px; background: white; opacity: 0; } 25%{ background: yellow; top: 400px; opacity: 1; } 50%{ background: orange; top: 200px; opacity: 1; } 75%{ background: aqua; top: 400px; opacity: 1; } 100%{ background: white; top: 0px; opacity: 0; } } @keyframes mymove { 0%{ top: 0px; background: white; opacity: 0; } 25%{ background: yellow; top: 400px; opacity: 1; } 50%{ background: orange; top: 200px; opacity: 1; } 75%{ background: aqua; top: 400px; opacity: 1; } 100%{ background: white; top: 0px; opacity: 0; } } </style> </head> <body> <div class="sq" id="v1">嘿</div> <div class="sq" id="v2">哈</div> <div class="sq" id="v3">咦</div> <div class="sq" id="v4">啊</div> <div class="sq" id="v5">哇</div> <div class="sq" id="v6">哦</div> <div class="sq" id="v7">哇</div> </body> </html>
以下是常用是属性
http://www.runoob.com/css3/css3-animations.html
| @keyframes | 规定动画。 | 3 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 | 3 |
| animation-name | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 | 3 |
| animation-delay | 规定动画何时开始。默认是 0。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | 3 |