CSS3 animation 动画

今天看到一个很酷的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
版本：	CSS3
JavaScript 语法：	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图大家可以测试看看，这是他们原网站的www.66pc28.com的logo,虽然这logo看上去有些不协调的字体，但效果还是可以得，借鉴中。

秒客网

CSS3 animation 动画

定义和用法

语法

相关文章