CSS3动画案例—抖动导航

原创 波克比 随笔 CSS3 3301阅读 2014-08-19 16:48:50 举报

代码片段 1

[code].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)}
}[/code]

以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"。

评论 ( 4 )
最新评论
zc43616364 2014-08-29 15:21:11 4F

收藏了 研究下。 应用到其他方面。~~~

nikilee 2014-08-21 15:24:31 3F

不错~先收藏,学习下

Crik 2014-08-21 11:44:18 2F

代码很简单,效果很实在

风中小萌 2014-08-20 14:06:26 1F

不错、 收藏起研究研究