CSS3 animation，@keyframes 动画

来源：互联网发布：域名top区别编辑：程序博客网时间：2024/05/17 22:00

今天看到一个很酷的logo看了下他用的是animation 动画效果，就拿来做例子

浏览器支持

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

Safari 和 Chrome 支持替代的 -webkit-animation 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。

定义和用法

animation 属性是一个简写属性，用于设置六个动画属性：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

默认值：none 0 ease 0 1 normal继承性：no版本：CSS3JavaScript 语法：object.style.animation="mymove 5s infinite"

语法

animation: name duration timing-function delay iteration-count direction;

值描述animation-name规定需要绑定到选择器的 keyframe 名称。。animation-duration规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function规定动画的速度曲线。animation-delay规定在动画开始之前的延迟。animation-iteration-count规定动画应该播放的次数。animation-direction规定是否应该轮流反向播放动画。

下面是w3school的实例，

<!DOCTYPE html><html><head><style> div{width:100px;height:100px;background:red;position:relative;animation:mymove 5s infinite;-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/}@keyframes mymove{from {left:0px;}to {left:200px;}}@-webkit-keyframes mymove /*Safari and Chrome*/{from {left:0px;}to {left:200px;}}</style></head><body><p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p><div></div></body></html>

这是站点logo使用的动画效果

#logo {

animation:1s steps(16) 0s reverse none infinite running logo;

background:transparent url("seclogo.png") no-repeat scroll 0 0;

　 width: 195px;
height: 150px;

}

当然要做下兼容

@-webkit-keyframes logo {
   from { background-position: 0px; }
   to { background-position: -3120px; }
}
@-moz-keyframes logo {
   from { background-position: 0px; }
   to { background-position: -3120px; }
}
@-o-keyframes logo {
   from { background-position: 0px; }
   to { background-position: -3120px; }
}

好简单就出了一个跳动的动作，很强大啊，调整steps（16）中的数字还能实现左右滑动效果，1s自然就是跳动的频率了，不过加快动作好像不行，慢动作却是可以。

附上seclogo.png图大家可以测试看看，效果还是可以得，借鉴中。

0 0