先说说最最简单的一种方式，看了绝对不懵圈的那种：
animation: name duration;
翻译如下：
animation : 定义过的动画名 动画时长 ;
<!DOCTYPE html>
< html >
< head >
< Meta charset = " UTF-8 " >
< title > Animate </ title >
< style >
/* 清除浏览器 默 认边距 */
* { padding : ; margin : ; }
/* 这段 代码 是为了居中 显示 ，不是重点，看不懂的话可以无视 */
body {
height : vh ;
dis play : flex ;
align-items : center ;
justify-content : center ;
}
/* 定义动画：动画名(change-color) */
@keyframes change-color {
from /* 0% */ { color : red } /* 红 */
16% { color : orange } /* 橙 */
32% { color : yellow } /* 黄 */
48% { color : green } /* 绿 */
64% { color : cyan } /* 青 */
80% { color : blue } /* 蓝 */
to /* 100% */ { color : purple } /* 紫 */
}
.animate {
width : px ;
height : px ;
/* 再使用预先定义好的动画 */
animation : change-color s ;
/* 动画：动画名(change-color) 时长(10秒) */
}
</ style >
</ head >
< body >
< div class = " animate " >
<!-- 动画：动画名(change-color) 时长(10秒) -->
animation: change-color 10s;
</ div >
</ body >
</ html >如果我们不想让它结束，那就十秒过后再来十秒，十秒完再十秒，无限重复、无限循环：
animation: name duration i tera tion-count;
翻译过来就是：
animation : 定义过的动画名 动画时长 动画 次数 ;
<!DOCTYPE html>
< html >
< head >
< Meta charset = " UTF-8 " >
< title > Animate </ title >
< style >
/* 清除浏览器 默 认边距 */
* { padding : ; margin : ; }
/* 这段 代码 是为了居中 显示 ，不是重点，看不懂的话可以无视 */
body {
height : vh ;
dis play : flex ;
align-items : center ;
justify-content : center ;
}
/* 先定义动画，动画名叫：change-color */
@keyframes change-color {
from /* 0% */ { color : red } /* 红 */
16% { color : orange } /* 橙 */
32% { color : yellow } /* 黄 */
48% { color : green } /* 绿 */
64% { color : cyan } /* 青 */
80% { color : blue } /* 蓝 */
to /* 100% */ { color : purple } /* 紫 */
}
.animate {
width : px ;
height : px ;
/* 再使用预先定义好的动画 */
animation : change-color s infinite ;
/* 动画：动画名(change-color) 时长(10秒) 动画 次数 (无限) */
}
</ style >
</ head >
< body >
< div class = " animate " >
<!-- 动画：动画名(change-color) 时长(10秒) 动画 次数 (无限) -->
animation: change-color 10s infinite;
</ div >
</ body >
</ html > <!DOCTYPE html>
< html >
< head >
< Meta charset = " UTF-8 " >
< title > Animate </ title >
< style >
/* 清除浏览器 默 认边距 */
* { padding : ; margin : ; }
/* 这段 代码 是为了居中 显示 ，不是重点，看不懂的话可以无视 */
body {
height : vh ;
dis play : flex ;
align-items : center ;
justify-content : center ;
}
/* 先定义动画，动画名叫：change-color */
@keyframes change-color {
from /* 0% */ { color : red } /* 红 */
13% { color : orange } /* 橙 */
26% { color : yellow } /* 黄 */
39% { color : green } /* 绿 */
52% { color : cyan } /* 青 */
65% { color : blue } /* 蓝 */
78% { color : purple } /* 紫 */
to /* 100% */ { color : red } /* 最后一帧和第一帧的样式一致 */
}
.animate {
width : px ;
height : px ;
/* 再使用预先定义好的动画 */
animation : change-color s infinite ;
/* 动画：动画名(change-color) 时长(6秒) 动画 次数 (无限) */
}
</ style >
</ head >
< body >
< div class = " animate " >
<!-- 动画：动画名(change-color) 时长(6秒) 动画 次数 (无限) -->
animation: change-color 6s infinite;
</ div >
</ body >
</ html >什么是交替动画呢？简单来说就是从 第一帧红 到 最后一帧紫 运行完了之后，再从 最后一帧紫 到 第一帧红 ，然后再从红到紫、从紫到红，大红大紫。
这种动画就不用最后一帧再定义回第一帧的红色了，直接定义从红到紫即可。来看看语法：
animation : 定义过的动画名 动画时长 动画 次数 动画方向 ;
<!DOCTYPE html>
< html >
< head >
< Meta charset = " UTF-8 " >
< title > Animate </ title >
< style >
/* 清除浏览器 默 认边距 */
* { padding : ; margin : ; }
/* 这段 代码 是为了居中 显示 ，不是重点，看不懂的话可以无视 */
body {
height : vh ;
dis play : flex ;
align-items : center ;
justify-content : center ;
}
/* 先定义动画，动画名叫：change-color */
@keyframes change-color {
from /* 0% */ { color : red } /* 红 */
to /* 100% */ { color : purple } /* 为了方便直接从红到紫 */
}
.animate {
width : px ;
height : px ;
/* 再使用预先定义好的动画 */
animation : change-color s infinite alternate ;
/* 动画：动画名(change-color) 时长(1秒) 动画 次数 (无限) 动画方向(交替运行) */
}
</ style >
</ head >
< body >
< div class = " animate " >
<!-- 动画：动画名(change-color) 时长(1秒) 动画 次数 (无限) 动画方向(交替运行) -->
animation: change-color 1s infinite alternate;
</ div >
</ body >
</ html >语法：
animation : 定义过的动画名 动画时长 动画运行的方式 ;
动画运行的方式要用到 steps 这个 函数 。
看起来可能有点晕，但是我们写成英文看起来就会好很多：
animation : change-color s steps ( ) ;
这里面唯一 一个 新鲜词就是steps，这个steps后面要写上小括号，括号里面就是这次动画要按照多少帧来运行，来看个具体的案例：
<!DOCTYPE html>
< html >
< head >
< Meta charset = " UTF-8 " >
< title > Animate </ title >
< style >
/* 清除浏览器 默 认边距 */
* { padding : ; margin : ; }
/* 这段 代码 是为了居中 显示 ，不是重点，看不懂的话可以无视 */
body {
height : vh ;
dis play : flex ;
align-items : center ;
justify-content : center ;
}
/* 先定义动画，动画名叫：change-color */
@keyframes change-color {
from /* 0% */ { color : red } /* 红 */
16% { color : orange } /* 橙 */
32% { color : yellow } /* 黄 */
48% { color : green } /* 绿 */
64% { color : cyan } /* 青 */
80% { color : blue } /* 蓝 */
to /* 100% */ { color : purple } /* 紫 */
}
.animate {
width : px ;
height : px ;
/* 再使用预先定义好的动画 */
animation : change-color s steps ( ) ;
/* 动画：动画名(change-color) 时长(7秒) 动画运行的方式(steps(1)) */
}
</ style >
</ head >
< body >
< div class = " animate " >
<!-- 动画：动画名(change-color) 时长(7秒) 动画运行的方式(steps(1)) -->
animation: change-color 7s steps(1);
</ div >
</ body >
</ html >语法：
animation : 动画名 时长 step-end both ;
来看具体案例：
<!DOCTYPE html>
< html >
< head >
< Meta charset = " UTF-8 " >
< title > Animate </ title >
< style >
/* 清除浏览器 默 认边距 */
* { padding : ; margin : ; }
/* 这段 代码 是为了居中 显示 ，不是重点，看不懂的话可以无视 */
body {
height : vh ;
dis play : flex ;
align-items : center ;
justify-content : center ;
}
/* 先定义动画，动画名叫：change-color */
@keyframes change-color {
from { color : red }
16% { color : orange }
32% { color : yellow }
48% { color : green }
64% { color : cyan }
80% { color : blue }
to { color : purple }
}
.animate {
width : px ;
height : px ;
/* 再使用预先定义好的动画 */
animation : change-color s step-end both ;
/* 动画：动画名(change-color) 时长(7秒) 动画运行的方式(step-end) 填充模式(双向) */
}
</ style >
</ head >
< body >
< div class = " animate " >
<!-- 动画：动画名(change-color) 时长(7秒) 动画运行的方式(step-end) 填充模式(双向)-->
animation: change-color 7s step-end both;
</ div >
</ body >
</ html >语法：
animation : 动画名 时长 step-end infinite ;
除了在 调用 动画的语法上最后 一个 单词不一样，其实主要区别在于定义动画时，定义动画的时候可以多加一帧，来看具体案例：
<!DOCTYPE html>
< html >
< head >
< Meta charset = " UTF-8 " >
< title > Animate </ title >
< style >
/* 清除浏览器 默 认边距 */
* { padding : ; margin : ; }
/* 这段 代码 是为了居中 显示 ，不是重点，看不懂的话可以无视 */
body {
height : vh ;
dis play : flex ;
align-items : center ;
justify-content : center ;
}
/* 先定义动画，动画名叫：change-color */
@keyframes change-color {
from { color : red }
14% { color : orange }
28% { color : yellow }
42% { color : green }
56% { color : cyan }
70% { color : blue }
84% { color : purple }
to { color : aquamarine }
}
.animate {
width : px ;
height : px ;
/* 再使用预先定义好的动画 */
animation : change-color s step-end infinite ;
/* 动画：动画名(change-color) 时长(7秒) 动画运行的方式(step-end) 动画 次数 (无限) */
}
</ style >
</ head >
< body >
< div class = " animate " >
<!-- 动画：动画名(change-color) 时长(7秒) 动画运行的方式(step-end) 动画 次数 (无限)-->
animation: change-color 7s step-end infinite;
</ div >
</ body >
</ html >学会了这一章，你就已经可以实现一些简单的动画 效果 了，但是为什么最后一帧会消失呢？
这和 steps 函数 的运行机制有关，其实它的原理并不复杂，但就是因为不符合人类的直觉导致许多人无法理解。
接下来的章节我们就来深入的理解一下这个神秘的 steps 函数 。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did100558