分享动画部分Animation与Transition的语法和异同：

一、Animation属性是一个简写属性，用于设置六个动画属性：

两个必要属性：

1、animation-name     动画名称（关键帧名称）

2、animation-duration 动画持续时间

其他属性值：

3、animation-timing-function 动画运动形式

4、animation-delay 动画延迟

5、animation-iteration-count 重复次数

6、animation-direction 动画的播放方向

7、animation-play-state 播放状态（ running 播放 和paused 暂停 ），可以用来控制动画暂停。

参数语法：

1、animation-name: IDENT; 

此处的IDENT要和Keyframes中的IDENT一致，如果不一致,将不能实现任何动画效果；none为默认值，当值为none时，将没有任何动画效果。

2、animation-duration: time;

animation-duration动画所持续的时间长，取值:为数值，单位为s （秒.）其默认值为“0”。 

3、animation-timing-function: ease;ease-in;ease-in-out;linear;cubic-bezier

动画的运动形式。具有以下六种变换方式：ease/ease-in/ease-in-out/linear/cubic-bezier。

4、animation-delay:time;

动画开始（延迟）时间。取值为为数值，单位为s(秒)，其默认值也是0。

5、animation-iteration-count: infinite/number；

动画的循环次数，其可以取值
  
   为数字，其默认值为“1”；infinite为无限次数循环。
  

6、animation-direction: normal /alternate

动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

7、animation-play-state: running/paused

主要是用来控制元素动画的播放状态。其主要有两个值，running（播放）和paused（暂停）其中running为默认值。这个属性目前很少内核支持。

简写语法： animation: myani 1s ease 2 alternate 1s both;

参数意义： 名称 缓动时间 缓动形式 轮播几次  交替轮播  延迟播放时间  停止播放 

二、Transition可以改变元素在可视化区域的坐标，以及形状,还有些3D形变。

Transition属性：

1、旋转(rotate):rotate支持一个参数,一个角度值 0-360deg   

#demo {

transform:rotate(180deg);/*实现180度旋转, */

}

2、缩放(scale): scale支持两个参数(x，y)，如果没有填y轴的话,则取x的值；（数值范围，=1不变，>1放大，<1 缩小） scale提供两个子方法,scaleX,scaleY,用来分别设置x或y的缩放;

#demo {

transform:scale(1.2);/*放大1.2倍*/ 

transform:scale(.8);/*缩小为正常的0.8倍*/

}

子写法: scaleX, scaleY;

3、倾斜(skew):skew支持两个参数(x,y),参数类型为角度(deg);

#demo {

  transform:skew(45deg);/*文本沿x轴向左倾斜45°*/

  transform:skew(0,45deg);/*文本沿y轴向下倾斜45°*/

}

子写法: skewX, skewY;

4、平移(translate):translate接收两个参数(x,y)为平移的距离;

#demo {

transform:translate(20px,5vh);/*向左移动二十像素,向下移动百分之五的视窗高度*/

}

子写法:translateX,translateY;

Animation功能与Transition功能大部分相同，他们都是随着时间改变元素的属性值。他们主要区别是transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。这样我们就可以直接在一个元素中调用animation的动画属性。