2018.12.05

十三、CSS过渡与动画
Css过渡
1.什么是过渡特效
(1)从一个状态缓慢的变化到另一个状态我们称之为过渡。在CSS中用于设置过渡特效的属性叫做“transition”，
(2)该属性允许CSS的属性值在一定的时间区间内平滑地过渡，并能够对CSS中绝大部分属性的变化生效（属性的值一般要为数值类型，但并不是绝对）
(3)transition属性包含多个分支属性，主要有：
“过渡CSS属性名称”、
“过渡执行时间”、
“过渡时间速率曲线”、
“过渡的延时执行”
一般而言，四个属性值都是设置在要过渡的元素本身上的。
2.过渡使用流程
流程：
①　给要过渡的元素设置初始状态
②　设置要过渡的元素设置最终状态
③　给要过渡的html标签设置过渡属性

3.过渡基本演示

4.过渡属性值详解
(1)过渡属性transition-property
该属性是用来指定当元素其中一个属性改变时执行的过渡动画效果，该属性有三种类型的值：
①　none 将过渡效果设置为“无过渡效果”，或停止当前过渡效果。
②　all （默认）为所支持的所有CSS属性在值变化时执行动画过渡效果。
③　[property name] 指定一个或多个属性名称列表，以逗号“,”进行分隔，当指定的属性产生变化时，为其执行指定属性的动画过渡效果。
(2)过渡时间 transition-duration
该属性是用于设定一个属性的值过渡被触发开始时到结束时所需要经历的时间，单位为秒（s），如：“0.3s”或“.3s”,它的默认值为“0”，单位不能省略，否则过渡动画无法执行。
(3)过渡时间曲线transition-timing-function
该属性允许你根据时间的推进去改变属性值的变换速率，目前它可能够设置6个类型的值：
ease默认值，逐渐减速。
linear匀速。
ease-in加速。
ease-out减速。
ease-in-out先加速，后减速。
提示
通过cubic-bezier([参数])设置贝塞尔曲线也能做到时间曲线控制，但是较为复杂，有兴趣可以去私下研究下。
(4)过渡延迟transition-delay
该属性规定在用户进行操作后多久开始执行动画，也就是延迟执行过渡动画的时间，单位同样是秒“s”，写法与“transition-duration”一致，默认值同样为“0”。
(5)综合值transition
和其它大多数CSS样式设置属性一样，transition属性也支持多值组合的写法，而且也是实际开发中最为常用的写法，能大大地节约代码量。
但在编写该属性的时候要注意允许过渡的属性一般只写成all或者单个属性名，如果写成由逗号分隔的属性集合，如果写出以逗号分隔的属性集合，那么就只会使用最后一个属性为运行过过渡的属性。
Css动画
1.什么是css动画
在CSS中执行动画的属性是CSS3属性中的“animation”，该属性可以让元素随着时间的推移，产生“位置”、“形状”、“颜色”、“大小”、“透明度”等属性变化。
2.css动画和css过渡的区别
(1)动画可以不需要任何事件的激活（当然也可以通过事件激活）让元素本身就“挂载”一系列的CSS属性变化。
(2)动画可以单独地存在并被不同的标签元素调用。
(3)动画能够“无限次”地执行动画。
3.css动画使用流程
(1)定义一个动画
(2)在html元素中调用需要的动画（调用后时可以设置各种动画相关属性）
4.css动画使用示例
以宽高的动态变化为例
5.css动画定义方式

/* @keyframes：用于声明一个动画，后面跟动画名称与动画实现 /
@keyframes my-a-name {
/ 动画执行过程 */
}

6.css动画过程定义
定义动画过程有两种方式，一种为“英文单词”定义模式，一种为“百分数”定义模式。
英文单词模式
该模式只包含两个关键帧，即开始帧“from”，表示动画开始时执行的CSS属性，和结束帧“to”，表示动画结束时执行的CSS属性。

百分数模式
该模式能够支持从“0%”到“100%”之间的所有帧的定义
“0%”相当于“from”，表示动画开始帧，
“100%”相当于“to”，表示动画结束帧。

该模式由于控制的精细度高，书写修改容易，甚至可以通过“定义百分比的跳跃”或“CSS属性值的跳跃”来实现动画的“匀速”、“加速”、“减速”，“变速”等动画速率的变化，非常地灵活，
所以这种写法也是现今最主流的定义动画关键帧的方式。

7.调用css动画时的属性
(1)动画名称“animation-name”
(2)动画执行时间“animation-duration”
(3)动画时间曲线“animation-timing-function”
(4)动画时间的延迟“animation-delay”
(5)动画播放的次数“animation-iteration-count”
(6)动画周期逆向播放“animation-direction”
(7)动画的播放和暂停“animation-play-state”
(8)设定元素动画形态“animation-fill-mode”
组合值的写法“animation