css 动效分析 #

淡入/淡出 #

普通淡入: 淡入就是 DOM 元素透明度从 0-1

从上方淡入: translateY 从-100%到 0 (-100%可以根据实际需要指定，下面的例子设置的是-30%)

从下方淡入: translateY 从 100%到 0 (100%可以根据实际需要指定，下面的例子设置的是 30%)

从左边淡入: translateX 从 -100%到 0 (-100%可以根据实际需要指定，下面的例子设置的是 -30%)

从右边淡入: translateX 从 100%到 0 (100%可以根据实际需要指定，下面的例子设置的是 30%)

从右下边淡入: translate(100%,100%) 从 translate(0,0) (100%可以根据实际需要指定，下面的例子设置的是 30%)

幻灯片切换 #

原理： DOM 元素位置变化

原理: translateX从-100%到0

原理: translateX从100%到0

放大/缩小 #

原理: 通过设置 scale 完成

保持最后的状态 #

但上面两个实例，在缩放完成之后，又变回了原来的大小(初始状态)，那么怎么保持最后的状态呢?

可以通过animation-fill-mode:forwards属性控制

animation-fill-mode : none | forwards | backwards | both;

值          描述
none        不改变默认行为。
forwards    当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards   在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both        向前和向后填充模式都被应用。

通过设置:animation: fadeIn 1.5s ease-out infinite; 的infinite达到无限循环的目的

动画速度控制 #

animation-timing-function, transition-timing-function 两者的属性取值一样，共有 5 种