CSS3动画案例—抖动导航
<!doctype html> <html> <head> <meta charset="utf-8"> <title>css3 导航</title> <style> *{ padding:0; margin:0;} body{ font-size:12px; font-family:"宋体", Arial; color:#333;} ul{ list-style:none;} a{ color:#333; text-decoration:none;} a:hover{ text-decoration:underline;} .clearFix{*zoom:1;} .clearFix:after{ clear:both; display:block; content:''; height:0; overflow:hidden;} .navMenu{ padding:0 10px; height:38px; line-height:38px; background:#f6f6f6; border-top:1px solid #ccc; border-bottom:1px solid #ccc;} .navMenu li{ float:left; font-family:"微软雅黑"; font-size:14px; font-weight:bold;} .navMenu li a{ display:inline-block; padding:0 20px;} .navMenu li a:hover{ color:#f60; text-decoration:none; -webkit-animation:swing .8s ease .2s normal; -moz-animation:swing .8s ease .2s normal; -o-animation:swing .8s ease .2s normal;} @-webkit-keyframes swing{ 0%,20%,40%,60%,80%,100%{-webkit-transform-origin:top center} 20%{-webkit-transform:rotate(15deg)} 40%{-webkit-transform:rotate(-10deg)} 60%{-webkit-transform:rotate(5deg)} 80%{-webkit-transform:rotate(-5deg)} 0%,100%{-webkit-transform:rotate(0deg)} } @-moz-keyframes swing{ 0%,20%,40%,60%,80%,100%{-moz-transform-origin:top center} 20%{-moz-transform:rotate(15deg)} 40%{-moz-transform:rotate(-10deg)} 60%{-moz-transform:rotate(5deg)} 80%{-moz-transform:rotate(-5deg)} 0%,100%{-moz-transform:rotate(0deg)} } @-o-keyframes swing{ 0%,20%,40%,60%.80%,100%{ -o-transform-origin:top center;} 20%{-o-transform:rotate(15deg)} 40%{-o-transform:rotate(-10deg)} 60%{-o-transform:rotate(5deg)} 80%{-o-transform:rotate(-5deg)} 0%,100%{-o-transform:rotate(0deg)} } </style> </head> <body> <ul class="navMenu clearFix"> <li><a href="#">导航菜单1</a></li> <li><a href="#">导航菜单2</a></li> <li><a href="#">导航菜单3</a></li> <li><a href="#">导航菜单4</a></li> <li><a href="#">导航菜单5</a></li> <li><a href="#">导航菜单6</a></li> <li><a href="#">导航菜单7</a></li> <li><a href="#">导航菜单8</a></li> </ul> </body> </html>
以chrome的webkit为例,简单的说明一下:
-webkit-animation:swing .8s ease .2s normal;
此句代码是指swing动画先停留0.2秒然后以正常速度开始播放,到0.8秒结束动画。
CSS3 @keyframes 规则
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
浏览器支持情况:
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注意:Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。
CSS3 动画
当在@keyframe创建动画,把它绑定到一个选择器,否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器:(这里是从0%【动画开始】到100%【动画结束】之间过渡)
@keyframes 规定动画。
animation 所有动画属性的简写属性,除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
http://www.w3cfuns.com/blog-5421655-5399838.html