一、动画
动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果
1、基本使用
制作动画分为两步：先定义动画，再使用（调用动画）
①用keyframes定义动画
@keyframes 动画名称 {
0% {
width：100px;
}
100% {
width: 200px;
}
}动画序列
- 0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
- 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改变为新样式的动画效果
- 动画是使元素从一种样式逐渐转变为另一种样式的效果，可以改变任意多的样式任意多的次数
- 请用百分比来规定变化发生的时间，或用关键词“from”和"to"，等同于0%和100%
②元素使用动画
div {
/*调用动画*/
animation-name:动画名称;
/*持续时间*/
animation-duration:持续时间;
}2、动画常见属性
①
属性 | 描述 |
规定动画 | |
所有动画属性的简写属性，除了animation-play-state属性 | |
规定@keyframes动画的名称（必需） | |
规定动画完成一个周期所花费的秒或毫秒，默认是0（必需） | |
规定动画的速度曲线，默认是“ease” | |
规定动画何时开始，默认是0 | |
规定动画被播放的次数，默认是1，还有infinite（无限循环） | |
规定动画是否在下一周期逆向播放，默认是“normal”，alternate逆播放 | |
规定动画是否正在运行或暂停，默认是“running”还有“pause” | |
规定动画结束后状态，保持forwards 回到起始backwards |
②简写：
animation：动画名称 持续时间 动画曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
- 简写属性里面不包括animation-play-state
- 暂停动画：animation-play-state：puased；经常和鼠标经过等其他配合使用
- 想要动画走回来，而不是直接跳回来：animation-direction：alternate
③详解速度曲线
animation-timing-function指定动画将如何完成一个周期。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。
值 | 描述 |
linear | 动画从头到尾的速度是相同的，匀速 |
ease | 默认。动画以低速开始，然后加快，在结束前变慢 |
ease-in | 动画以低速开始 |
ease-out | 动画以低速结束 |
ease-in-out | 动画以低速开始和结束 |
steps(int,start|end) | 指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。 第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下：
|
注:我们一个元素可以添加多个动画，用逗号隔开（效果类似于一只狗可以先添加动画跑到屏幕中间，然后再添加动画一直在原地跑）
二、过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。（经常和：hover一起搭配使用）
1、语法：
transition：要过渡的属性 花费时间 运动曲线 何时开始
- 属性：想要变化的CSS属性，比如宽度高度、背景颜色 、内外边距都可以。如果想要写多个属性，利用逗号进行分割；如果想要所有的属性都变化过渡，写一个all就可以
- 花费时间：单位是秒（必须写单位）
- 运动曲线：默认是ease（可以省略）
- 何时开始：单位是秒（必须写单位）可以设置延迟触发时间 ，默认是0s（可以省略）
- 谁做过渡就给谁加
