CSS过渡特效/CSS动画-学习笔记

Css学习第十三天
css过渡特效
1、 过渡特效的概述
什么是过渡特效：一个状态到缓慢的变化到另一个状态我们称之为过渡。
过渡使用流程：
①　给要过渡的元素设置初始状态
②　设置要过渡的元素设置最终状态
③　给要过渡的html标签设置过渡属性

2、 执行变换的属性transition-property(none all name指定一个或者多个属性名称列表，以逗号进行分隔，当指定属性产生变化是，为其执行指定属性的动画过渡效果
3、 过渡执行的时间transition-duration
4、 过渡时间的曲线transition-timing-function（ease默认值逐渐减速 linear ：匀速ease-in：加速 ease-out ：减速 ease-in-out：先加速再减速）提示：通过cubicbezier[参数]设置贝塞尔曲线也能做到时间曲线的控制。
5、 过渡延迟 transition-delay
6、 综合值：和其它大多数CSS样式设置属性一样，transition属性也支持多值组合的写法，而且也是实际开发中最为常用的写法，能大大地节约代码量。
但在编写该属性的时候要注意允许过渡的属性一般只写成all或者单个属性名，如果写成由逗号分隔的属性集合，如果写出以逗号分隔的属性集合，那么就只会使用最后一个属性为运行过过渡的属性。
二、CSS动画
1、什么是CSS动画：
在css中执行动画属性css3属性中的animation该属性可以让元素随着时间的推移。产生“位置” “形状” “颜色 ” “大小” “透明度”等属性的变化。
2、css动画和css过渡的区别：动画可以不需要任何事件的激活（当然也可以通过事件激活）让元素本身就“挂载”一系列的CSS属性变化，即一初始化就开始执行动画
动画可以单独地存在并被不同的标签元素调用。
默认动画返回时是一瞬间完成，而不像过渡一样缓慢的还原。【除非让动画的终止状态为初始状态的样式】
动画能够“无限次”地执行动画
3、CSS动画的属性
1）、动画名称与执行时间 animation-name/animation-
2）、动画的时间曲线：animation-timing-function
3)、动画的时间延迟animation-delay
4）、动画的播放次数 animation-iteration-count
5）、动画的周期逆向播放 animation-direction注意：动画的逆向播放也算一次动画
6）、动画的播放和暂停：animation-play-state（running播放动画 paused暂停动画）
7）设定元素的动画形态 animation-fill-mode（backwards、）