css动画效果：transition和animate

transition和animate都可以实现一些动画效果，不同点是transition需要借助交互，动画完成后依原动画效果复原；animation可以自定义关键帧中间状态、控制暂停和播放，结束后默认瞬间复原

一.transform（必须由交互来触发）：:移动（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）等效果
使用：transform属性用于元素自身，translate等具体属性用于hover等伪类
全局设置属性：transform-origin：来改变参考原点，默认为中心，可使用 left、right、center、、

1.translate线性移动
translate: transform: translate(50px, 30px); // 可以使用百分比，参照对象为自身

2.scale缩放
transform: scale(sx, sy) // 其中 sx 表示 x 方向的缩放比例，sy 表示 y 方向的缩放比例，如果 sy 没有指定值则与 sx 相等

3.rotate顺时针角度
transform: rotate(15deg)

4.skew形变
transform: skew(ax[, ay]) // 其中 ax 表示 x 方向的顺时针角度，ay 表示 y 方向的顺时针角度，如果 ay 没有指定值则 y 方向没有倾斜。

二.animation主要由8个属性组成：
animation-name(名字)：@keyframes定义的名字
animation-duration(持续时间)：取值和用法和上面的transition一样
animation-timing-function(动效函数)：取值和用法和上面的transition一样
animation-delay（延迟时间）：取值和用法和上面的transition一样
animation-iteration-count(次数)：可以设置有限次数，也可以设置无限次数infinite
animation-direction(方向)： 取值可以为：1）normal正向播放（0%–100%） 2) reverse反向播放（100%–0%） 3）alternate 奇数次正向播放，偶数次反向播放 4）alternate 奇数次反向播放，偶数次正向播放
animation-fill-mode(填充模式) ： 取值可以为：1）forwards动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
2）backwards animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
animation-play-state(运行状态)： 可以的取值为：1）running 动画运行 2）paused动画暂停,一般是js来控制

注意：当使用animation-direction时，animation-iteration-count的2次代表一次往复

使用方法：

div {
  animation: animateName 5s;
}
@keyframes animateName {
  from {
  }
  50% {
  }
  to {
  }
}

参考：https://blog.csdn.net/allenyhy/article/details/81608647