CSS3动画（animation @keyframes）
程序员文章站
2022-03-16 19:04:53
...
CSS3 @keyframes 规则：
在使用@keyframes创建动画时，如果不绑定到选择器，则不会出现动画效果；
至少要规定两个css属性，才能将动画绑定到选择器上：
规定动画的名称
规定动画的时长
如下：把 "myfirst" 动画捆绑到 div 元素，时长：5 秒
div{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}
```
说明：如果不定义时长，则默认为0 ，动画效果则不会显示
实例：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
<div></div>
</body>
</html>
```
说明：
用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
但是为了得到最佳的浏览器支持，建议始终定义 0% 和 100% 选择器。
CSS3动画属性
属性 描述
@keyframes 规定动画
animation 所有动画属性的简写，除了animation-paly-state
animation-name 规定@keyframes动画的名字
animation-duration 动画完成一个周期说话的时间 单位毫秒，默认为0
animation-timing-function 规定动画的运动曲线 默认为ease
animation-delay 规定动画何时开始
animation-interation-count 规定动画运动次数 默认1
animation-direction 规定动画是否在下一周期逆向运动 默认normal
animation-play-state 规定动画运行与否 默认running
animation-full-mode 规定动画时间外的状态
说明：
animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：
```
如下，分别应用了的CSS3属性
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera: */
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}
如下，是简写：
div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}
注意：如果选择器的名字中有- 则在动画中去掉- 连起来写 比如：
.fa-3x{
margin-top: -15px;
-webkit-animation: fa3x 2s ease-in infinite; /* Chrome, Safari, Opera */
animation: fa3x 1s infinite;
}
@-webkit-keyframes fa3x {
0% {margin-top: -15px;}
50% {margin-top: -5px;}
100% {margin-top: -15px;}
}
@keyframes fa3x {
0% {margin-top: -15px;}
50% {margin-top: -5px;}
100% {margin-top: -15px;}
}
参考资料：[http://www.w3school.com.cn/css3/css3_animation.asp](https://link.jianshu.com/?t=http://www.w3school.com.cn/css3/css3_animation.asp)
下一篇： ES更新数据