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

CSS3动画案例—抖动导航

相关推荐