为什么要引入CSS Animation
视觉动物怎么能止步于看静态的？人性是第一生产力
关键是解放了 Javascript
如何完成一个简单的动画
使用 @keyframes 结合 animation 来完成
举一个例子：如何实现一个颜色渐变的背景？
首先给出页面结构代码：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles.css">
<title>Document</title>
</head>
<body>
</body>
</html>
@keyframes
故名思意，就是关键帧，在静态图片连续播放的过程中对特定位置的效果进行设置。
一般来说将一个完整的播放过程按 0% 到 100% 进行划分，就像我们通常意义上了解的播放进度条，由此就可以实现相应的时间节点对绑定此关键帧的页面内容的变化。
“绑定此关键帧”是通过命名的方式来实现的，这在格式中得到了体现
/* styles.css */
@keyframes breatheWall {
0% {
background-color: red;
}
50% {
background-color: green;
}
100% {
background-color: blue;
}
}
@keyframes breatheWall: 使用@keyframes实现动画效果需要先声明关键字，然后输入本关键帧设置的名称（name，本例中为breatheWall）0%: 指当动画开始，以此类推50%指当动画进行到一半，100%指动画播放完。在设置时0至100中的任何一个数字都可以{background-color: red}: 在这里仅以背景颜色的切换来举例，实际上可以设置节点适用的任何 CSS 代码来达成当动画进行到这一帧时要实现的效果
注意：在改变颜色的关键帧中，要注意首尾即（0% 和 100%）中颜色一致才能保证动画效果连贯。
@keyframes的强大之处就在于，一旦进行了这种对关键帧的设定，当动画开始播放，所有的切换都是渐变的
而只完成了对@keyframes的设置还不够，接下来对需要引入这段关键帧的 HTML 元素（节点）通过animation一系列属性进行绑定。
animation
对播放时长（即动画持续时间）、播放节奏（即动画的快慢）等进行设置，关键是使 HTML元素（节点）与 @keyframes 产生联系。
这里提到的播放时长与播放节奏对应着 CSS Animation 中的 animation-duration 和 animation-timing-function
除了这两个以外当然还有很多，为了解决本问题应用的方式如下：
body {
animation-name: breatheWall; /* 将页面结构与关键帧进行绑定 */
animation-duration: 10s; /* 播放时长，单位为秒（s）或毫秒（ms）*/
animation-timing-function: linears; /* 播放节奏，还可先快后慢，先慢后快等 */
animation-iteration-count: infinite; /* 播放次数，此处指循环播放 */
/* 以上还可以简写为： animation: breatheWall 10s linears infinite; */
}
@keyframes breatheWall {
...
}
这样一来就可以实现一个简单的动画效果。
标签：动画,关键帧,breatheWall,keyframes,Animation,播放,animation,CSS From： https://www.cnblogs.com/thillbilly/p/17114983.html