一、css属性过渡transition

1、解释：

使用该属性后变化不会在一瞬间完成，会有一个连续的变化效果。第一个参数设置哪些属性变化时需要有连续的效果。

不论用什么方式使属性的值发生变化，transition都会生效。

2、语法：

transition: property duration timing-function delay;

transition-property: none|all| property;

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

transition: 过渡属性 过渡时间 过渡曲线 延迟时间
(1) 过渡属性，可以设置 宽度、高度、transform等，当有多个过渡效果时，可以用逗号隔开，或者用all来代表所有效果 (必写)
(2) 过渡时间，单位是s，表示花多久的时间达到变化后的效果 (必写)
(3) 过渡曲线，默认 ease，即逐渐慢，还有以下选项可以选择linear 匀速ease-in 加速ease-out 减速ease-in-out 先加速后减速
(4) 延迟时间，表示推迟多久执行过渡效果，默认0s，即不延迟，可以自定义

3、示例：

宽度变化，颜色变化，位置变化translate，大小变化scale,   旋转角度rotate

compassionate-bird-5nhue8 - CodeSandbox

二、css属性动画animation

1、解释：

transition只表示了一个状态到一个状态的过渡过程，过渡过程是定死的。

animation可以自定义的过渡过程并且可以设置播放次数。

2、语法：

（1）animation

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

使用animation来实现动画，@keyframes来定义元素的运动规律
(1) animation-name: 动画的名称，即@keyframes定义的动画名字（必写）
(2) animation-duration: 动画的执行时间，一个动画多久执行完成（必写）
(3) animation-timing-function: 动画的速度曲线，默认ease(逐渐变慢)，还有这些选项linear 匀速ease-in 加速ease-in-out 先加速后减速ease-out 减速
(4) animation-delay: 动画执行的延迟时间，默认0s
(5) animation-iteration-count: 动画的执行次数，默认为1，还可以选 infinite代表无限次
(6) animation-direction: 规定动画在下一周期是否逆向播放，默认 normal 不逆向播放，还可以选alternate 逆向播放
比如一个盒子从左走到右，如果执行次数是1，执行完成盒子就会立刻从右边弹回到最左边，如果设置了alternate逆向播放，那么盒子就会按照设定的速度曲线经过动画再回到左边
(7) animation-fill-mode: 规定动画的结束状态，默认backwards 回到起始状态，还可以选 保持状态 forwards
animation-direction设置了以后这个就不生效了
(8) animation-play-state: 设置动画的运行状态，默认 running 运行，还可以选 paused 停止

（2）animation-delay

animation-delay 属性定义动画什么时候开始。允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。

animation-delay 值单位可以是秒（s）或毫秒（ms）。

3、示例：

focused-bush-wv402l - CodeSandbox

三、transition、animation与3d动效结合

1、解释：

transition、animation与3d动效结合能做出空间炫酷的3d空间动效

2、语法：

总结一下3d位移和3d旋转的语法

// 父元素一定要定义 perspective
perspective: 500px// 如果父子元素都有3d动效，那要给父元素设置transform-style
transform-style:preserve-3d// 位移
transform: translateZ(100px)
transform: translate3d(0,0,100px)
// 也可以定义x和y轴方向的移动，那就是2d平面内的移动，没有3d近大远小的效果// 旋转
transform: rotateX(45deg)
transform: rotateY(45deg)
transform: rotateZ(45deg)
transform: rotate3d(1, 1, 0, deg) // x轴和y轴都旋转45度, 此时是找矢量, 及对角线位置

3、示例：

focused-bush-wv402l - CodeSandbox

四、常用动画库

没有必要自己写所有的css动画，animate里包含了常用的动画css效果，只要写入class就行。

Animate.css | A cross-browser library of CSS animations.

示例：

use animate - CodeSandbox

五、

参考：

https://www.jianshu.com/p/191b1c61e88e

https://www.jianshu.com/p/1f2b3649fae0