css动画

过渡动画

1.过渡动画
过渡（transition）动画，就是从初始状态过渡到结束状态这个过程中所产生的动画。
所谓的状态就是指大小、位置、颜色、变形（transform）等等这些属性。
2.过渡动画的属性
transition-property 指定需要过渡的属性，默认值all，指定多个属性用逗号隔开
transition-duration 指定过渡持续时间
transition-timing-function 指定过渡的动画效果 值： ease(默认，平滑) linear(线性) 等关键字，
transition-delay 过渡延时
transition 复合属性，如果只只有一个时间，该时间表示过渡持续时间
3.改变元素的状态
为目标元素添加伪类或添加声明了最终状态的类。
使用 transtion 属性只是规定了要如何去过渡，要想让动画发生，还得要有元素状态的改变。在css中给这个元素定义一个类（:hover等伪类也可以），这个类描述的是过渡动画结束时元素的状态。
除了使用hover等系统提供的伪类外，我们也可以定义自己的类，然后想要过渡时就通过js把类加到元素上面。
注意：单纯的代码不会触发任何过渡操作，需要通过用户的行为（如点击，悬浮等）触发。可触发的方式有：:hover :focus :checked 媒体查询触发 JavaScript触发。
4.过渡动画的局限性
transition的优点在于简单易用，但是它有几个很大的局限。
（1）transition需要事件触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition 只能定义开始状态和结束状态，不能定义中间状态

关键帧动画

1.关键帧动画
不同于过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧的话来说，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。
2.关键帧动画的css属性
animation-name 指定关键帧名称，如果多个用逗号隔开
animtion-duration 指定动画持续的时间
animation-timing-function 动画的动画类型 （设置的每一帧之间的变化）
animation-delay 动画延时
anaimtion-itertion-count 设置动画循环次数 infinite 表示无限次
animation-direction 指定动画运动方向 reverse 表示反向运行
animation-play-state 指定动画运动状态 paused 表示暂停
animation-fill-mode 指定动画结束时的状态
animation 复合属性
3.过渡动画与关键帧动画的区别
animation属性类似于transition，他们都是随着时间变化而改变元素的属性值，其主要区别在于：transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。