css动画

css动画语法

创建动画序列，需要使用 animation 属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes 规则实现。

animation 的子属性有：

animation-name：指定由 @keyframes 描述的关键帧名称。

animation-duration：设置动画一个周期的时长。

animation-delay：设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。

animation-direction：设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。

animation-iteration-count：设置动画重复次数， 可以指定 infinite 无限次重复动画

animation-play-state：允许暂停和恢复动画。

animation-timing-function：设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。

animation-fill-mode：指定动画执行前后如何为目标元素应用样式

@keyframes 规则，当然，一个动画想要运行，还应该包括 @keyframes 规则，在内部设定动画关键帧

transition:过渡

transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。

补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态。

帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。

transition 包括以下属性：

transition-property: all; 如果希望所有的属性都发生过渡，就使用all。

transition-duration: 1s; 过渡的持续时间。

transition-timing-function: linear; 运动曲线。属性值可以是：

linear 线性

ease 减速

ease-in 加速

ease-out 减速

ease-in-out 先加速后减速

transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。