CSS3 @keyframes 规则

来源：互联网发布：河南网络机柜生产厂家编辑：程序博客网时间：2024/05/19 03:44

dreamwear不提供@keyframes 规则

原文链接：http://jingyan.baidu.com/article/bad08e1e8c2a9909c851212f.html

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

<div></div>

</body>
</html>

演示地址：http://www.w3school.com.cn/tiy/t.asp?f=css3_keyframes

@keyframes的具体用法
它与其他的属性并不一样，它定义的动画并不直接执行，需要借助animation来运转。
@keyframes animationName { ... }
上面的写法定义了动画的名字为 animationName，挺简单的，就和js中定义函数名类似。

@keyframes animationName { ... }

animationName 后面的大括号内定义了具体的动画效果，他需要一个过程，否则就无法出现变化了。

@keyframes animationName {

from { ... }

to { ... }

}

from...to...就表示了这样一个过程，规定了动画起始的状态和结束的状态（相当于0%与100%）

在

@keyframes animationName {

from { ... }

to { ... }

}

中，里面呆着省略点的花括号里，这里你可以写入你想应用的CSS样式，这里你不仅能改变宽高，还能使用CSS3中添加的2D、3D变化效果。

示例代码：

@keyframes animationName {

from { transform:rotateX（60deg） translateZ( -180px ); width:100px; }

to { transform:translateZ( 180px ); width:200px; }

}

下面图片的效果就是动画做出来的，这里就不演示了。

当然你也可以直接用百分值写：

@keyframes animationName {

from { ... }

20% { ... }

40% { ... }

to { ... }

}

不仅如此，你还可以定义多个阶段的效果：

@keyframes animationName {

0 { ... }

50% { ... }

75% { ... }

......

100% { ... }

}

丝毫不影响效果，反而能展现的更丰富，因为你可以任意的添加自己需要的阶段效果

0 0