CSS3 animation，@keyframes 动画

最新推荐文章于 2024-01-09 14:15:05 发布

Chiuse

最新推荐文章于 2024-01-09 14:15:05 发布

阅读量417

点赞数

分类专栏： css+html+js

本文链接：https://blog.csdn.net/Chiuse/article/details/54094760

版权

css+html+js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天看到一个很酷的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图大家可以测试看看，效果还是可以得，借鉴中。