通过CSS3，我们无需javascript也可以创建一些简易的动画效果，下面我们来看一下相关的属性和规则。
CSS3 animation属性
通过animation属性，我们可以给元素附加动画效果及样式，下表列出了animation属性的值：
| 属性 | 功能 |
|---|---|
| animation-name | 定义动画的名称 |
| animation-duration | 定义动画运行一个周期花费的时间 |
| animation-timing-function | 定义动画的速度曲线 |
| animation-delay | 定义动画开始运行前的延迟时间 |
| animation-iteration-count | 定义动画被播放的次数 |
| animation-direction | 定义是否应该轮流反向播放动画 |
| animation-fill-mode | 定义动画在播放之前或之后，其动画效果是否可见 |
animation-name：
自定义动画名称，若值为none，则规定无动画效果。
animation-duration：
该属性单位为s或者ms，默认值为0，即无动画效果。
注意：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
animation-timing-function：
具体值有：
linear： 规定动画从开始到结束做匀速运动。ease（默认属性）： 规定动画以低速开始运动，然后加快，在结束前变慢。ease-in： 规定动画以低速开始运动。ease-out： 规定动画以低速结束运动。ease-in-out： 规定动画以低速开始和结束运动。cubic-bezier(n,n,n,n)： 贝赛尔曲线，我们在 cubic-bezier 函数中自定义它的值。可能的值是从 0 到 1 的数值。
animation-delay：
动画总是在经过animation-delay规定的时间过后才开始运动，其值同样以s或ms计，默认值为0。
注意：animation-delay允许负值，-2s 使动画立即开始，但跳过animation-duration时间的 2 秒进入动画。
animation-iteration-count：
其值为n或infinite，n为动画播放的次数值，infinite规定动画应该无限次的播放。
animation-direction：
属性值：
normal： 默认值。规定动画应该正常播放，从0%~100%。reverse： 规定动画应该反向播放， 从100%~0%。alternate： 规定动画应该轮流反向播放，一次正向（0%——100%），一次反向（100%——0%）
注意：如果 animation-direction 值是 “alternate”，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放，如果把动画设置为只播放一次，则该属性值没有效果。即：如果动画设置为播放两次，并设置animation-direction值为alternate，则动画会播放一次正向与一次反向，加起来两次。
animation-fill-mode：
通过该属性，我们可以决定动画的填充模式。
none： 不改变默认行为。forwards： 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。backwards： 在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。both： 向前和向后填充模式都被应用。
animation 属性的复合写法
animation属性是一个简写属性，我们可以通过简写更方便的规定动画的属性值。
语法
animation: animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction ;
各属性之间用空格隔开。
注意：除了animation-duration animation-delay之外，其他属性之间没有固定书写书序，当我们只规定了一个时间时，默认是animation-duration的值，若我们规定了两个时间，则第一个时间是animation-duration的值，第二个是animation-delay的值。
CSS3 @keyframes 规则
通过animation我们可以规定动画的属性，但是若要创建一个动画并规定某项 CSS 样式，创建由当前样式逐渐改为新样式的动画效果，那我们需要用到@keyframes规则
定义和用法
通过 @keyframes 规则，您能够创建动画。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
注意：默认情况下，元素运动完毕后，会停到起始位置。
语法
@keyframes animation-name {
from {css-styles;}
to {css-styles;}
}
此语句等价于：
@keyframes animation-name {
0% {css-styles;}
100% {css-styles;}
}
为了更方便的理解，下面我们看一个简单的颜色变化的例子：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#main{
width: 100px;
height: 100px;
background-color: black;
animation: anim1 6s 2s linear;
}
@keyframes anim1 {
0%{
background-color: green;
}
50%{
background-color: blue;
}
100%{
background-color: purple;
}
}
</style>
</head>
<body>
<div id="main"></div>
</body>
</html>
这个动画是一个黑色的正方形在两秒后0%时匀速的从绿色变为蓝色再变为紫色的过程，我们可以看到，第一个6s是动画一周期花费的时间，第二个2s是开始前的延迟时间。
如果我们这时加上forwards，即
animation: anim1 6s 2s linear forwards;
则动画最后停止时会一直保持为紫色。
而如果是backwards的话，即
animation: anim1 6s 2s linear backwards;
动画会在开始的2s时间内保持为绿色，2s后从0%开始变化，如果不加backwards，则动画在开始会一直是黑色，直到0%。
博客小新第一天入驻csdn，喜欢记录一些平时的知识与心得，请各位大牛小新多多指教：）
———逆战班手记
参考文献来源（侵删）：https://www.w3school.com.cn/css3/css3_animation.asp
