transition,transform和animation

transition

常用简写写法：transition：property duration timing-function delay；

1. transition-property:参与过渡的属性名
2. transition-duration:过渡完成所需要的时间
3. transition-timing-function:过渡时间曲线 默认值是ease
   
   其中cubic-bezier()可以参考贝塞尔曲线
   4.transition-delay:动画的延迟时间

transform

常用写法 transform: rotate scale skew translate;
1.rotate： routate(45deg) 旋转角 正则顺时针 负则逆时针
2.scale ：scale(x,y) X,Y的缩放倍数 或者也可以单独缩放X或Y：scaleX(),scaleY()
3.skew ：skew(X,Y) X,Y的倾斜度
4.translate(X,Y) 位移 也可以单独位移X或Y ：translateX(),translateY()

animation

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

先定义一个名为demo的动画关键帧：

@keyframes demo{
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

1.animation-name:动画名称 即 @keyframes 后面定义的关键字demo
2.animation-duration:动画执行时间
3.animation-timing-function：动画的速度曲线 同transition的贝塞尔曲线
4.animation-delay:动画延迟时间
5.animation-iteration-count:动画执行次数 -----number/infinite(无限次)
6.animation-direction:是否反向播放
7.animation-fill-mode:播放前后动画是否可见 (none:从不改变；forwards:动画完成后保持最后一个属性值；backwards:动画显示之前应用开始属性值；both：动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性)详见fill-mode
8.animation-play-state:paused暂停/running运行