CSS3-@keyframes动画
在 CSS3 中可以通过 @keyframes 来创建动画，由当前样式逐渐变为新样式的动画效果。
创建动画的语法就像创建 JS 函数函数一样，动画需要指定动画的名称，使用时需要通过名称来调用。
创建语法一：
@keyframes 动画名称 {
/* 从 from 指定的样式 */
from { css样式 }
/* 过渡到 to 指定的样式 */
to { css样式 }
}
创建语法二：
@keyframes 动画名称 {
/* 也可以通过 百分比 将动画分为若干过渡段，css样式会根据百分比逐段过渡 */
0% { css样式 }
20% { css样式 }
50% { css样式 }
100% { css样式 }
}
通过 animation 属性来调用创建的动画，该属性同 border 属性是一个综合属性，可以单独设置某个具体属性也可以综合设置；综合设置时需要指定两个必要的属性值：animation-name（动画名称）和 animation-duration（动画时长，需要指定时间单位为 s 或 ms）。
创建的动画，需要在 CSS 选择器中使用，否则没有效果。
调用动画的简写语法：
css选择器 {
animation: 动画名称 动画时长 循环次数 轮流反向 延迟时间 ...;
}
示例：
div {
width: 60px;
height: 60px;
background-color: #f00;
margin-left: 100px;
margin-top: 100px;
/* 调用定义的动画 */
animation: dong 3s;
}
@keyframes dong {
/* 动画开始样式 */
from {
transform: translate(0, 0) rotate(0deg);
}
/* 动画结束样式 */
to {
transform: translate(300px, 0) rotate(720deg);
}
}
<div>div>
一些动画属性：
animation-name 设置对象所应用的动画名称，必须与规则 @keyframes 配合使用，因为动画名称由 @keyframes 定义
animation-name: donghua;
animation-duration 设置动画的持续时间
animation-duration: 5s;
animation-direction 设置是否轮流反向播放动画
normal动画正常播放；alternate动画轮流反向播放，动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
animation-direction: alternate;
animation-timing-function 设置动画的过渡类型
linear： 线性过渡；ease： 平滑过渡；ease-in： 由慢到快；ease-out： 由快到慢；ease-in-out： 由慢到快再到慢steps(n，start|end)该属性值是一个阶跃函数，比较重要但官网未介绍，用于设置动画分几步完成；第一个参数为动画时间的间隔数量是一个正整数，第二个参数为阶跃点，是个可选参数，start 表示一开始就进行阶跃，end 表示每阶段完成后再进行阶跃，
默认值为end。
animation-timing-function: steps(60);
示例：实现秒针效果
/* 实现秒针效果 */
div {
width: 6px;
height: 200px;
margin: 100px auto;
border-radius: 50% 50% 0 0;
background-color: orange;
/* 设置旋转元素的基点 */
transform-origin: center bottom;
/* 调用动画 */
animation-name: rot;
/* 动画持续时间 */
animation-duration: 60s;
/* 动画过渡类型 */
animation-timing-function: steps(60);
}
/* 定义动画 */
@keyframes rot {
/* 从 0deg */
0% {
transform: rotate(0deg);
}
/* 到 360deg */
100% {
transform: rotate(360deg);
}
}
<div>div>
animation-delay 设置对象动画的延迟时间（多长时间后触发动画）
animation-delay: 1s;
animation-iteration-count 设置对象动画的循环次数
n指定对象动画的具体循环次数；infinite无限次
animation-iteration-count: infinite;
animation-fill-mode 设置对象动画时间之外的状态
none： 默认值，不设置对象动画之外的状态；forwards： 对象状态为动画结束时的状态；backwards： 对象状态为动画开始时的状态；both： 对象状态为动画结束或开始的状态
animation-fill-mode: forwards;
animation-play-state 设置对象动画的状态
running： 运动；paused： 暂停
animation-play-state: running;