动画

transition

语法：

transition: property duration timing-function delay;  //要设置过渡的css，这个要过渡多长时间完成，过渡的速度（均匀/变速..），动画延迟

property 最方便就是all，否则就写css要变的属性，多属性的话就用逗号 , 隔开
timing-function (cubic-bezier是个曲线函数)

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

animation + @keyframes

语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state; 

值	说明
animation-name	指定要绑定到选择器的关键帧的名称 （即@keyframes的名字）
animation-duration	需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期 （和上面那个一样）
animation-delay	启动前的延迟间隔。
animation-iteration-count	播放次数。 （n or infinite）即n次或无限次
animation-direction	是否倒着来一遍？。 （）
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 （目前感觉没什么用）
animation-play-state	指定动画是否正在运行或已暂停。 （目前感觉没什么用）

**是否倒放？不设置倒放的话，如果设置了重复播放，那重复的时候是很突兀的。要往返的话，常用：alternate，alternate-reverse **

值	描述
normal	默认值。动画按正常播放。
reverse	动画反向播放。
alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。

@keyframes

@keyframes mymove  //这里定义一个动画名字，和animation的name绑定从而实现动画，相当于animation控制时间，@keyframes控制动画
{//动画进行到各个阶段时的css样式
  0%   { 当前元素的css }
  25%  { ... }
  50%  { ... }
  75%  { ... }
  100% { ... }
}
也可以直接设置首尾
@keyframes myName {
  from{ ... }
  to{ ... }
}