一.动画（animation）是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果
二.动画的基本使用
制作动画分为两步：
1.先定义动画
2.再使用（调用）动画
1.用keyframes定义动画（类似定义类选择器）
@keyframes 动画名称{
0%{
width:100px
}
100%{
width:200px
}
动画序列
0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
动画是使元素从一种样式逐渐变化为另一种样式的效果，你可以改变任意多的样式任意多的次数
请用百分比来规定变化发生的时间，或者用关键词‘form’和‘to’，等同于0%和100%
关于例句如下代码
<!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"><title>Document</title><style>/* from和to等价于0%和100% */div {width: 200px;height: 200px;background-color: aqua;/* 动画名称 */animation-name: move;/* 动画持续时间 */animation-duration: 4s;}/* 定义动画 动画自己起的名称 *//* @keyframes move{ *//* 开始状态 *//* 0% 或者 *//* from {transform: translateX(0px);}结束状态 100% 或者 *//* to { transform: translateX(1000px);}
} *//* 规定动画 */@keyframes move {0% {transform: translateX(0);}25% {transform: translate(1000px, 0);}50% {transform: translate(1000px, 500px);}75% {transform: translate(0, 500px);}100% {transform: translate(0);}}</style></head><body><div></div>
</body></html>三.动画中常用的属性
四.动画简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态；
例如： animation:myfirst 5s linear 2s infinite alternate;
1.简写属性里面不包括animation-play-state
2.暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用
3.想要动画走回来，而不是直接跳回来：animation-direction:alternate
4.盒子动画结束后，停在结束位置：animation-fill-mode：forwards
速度曲线细节
animation-timing-function:规定动画的速度曲线，默认是“ease”
