CSS3 Animation 控制元素在动画的初始位置开始动画

Posted 2023-05-09

参考技术A

当我们给元素添加Animation后，动画总是现在元素的初始位置显示一下，然后再跳到动画的起始位置播放，这样的话会很难看。

解决方法：

使用animation-fill-mode:forwards属性

forwards参数意思为 元素将在动画延迟结束后 初始位置显示在 动画关键帧的最后一帧定义的位置

backwards参数意思为 元素将在动画延迟结束后 初始位置显示在 动画关键帧的第一帧定义的位置

上边样式的将变现为，class为phone的元素会在加载完成后，从它的定义位置靠下5rem开始动画。

js中赋值nimation-fill-mode:forwards的方法：

object .style.animationFillMode=none | forwards | backwards | both;

css动画，animation动画和translation动画的区别是什么

参考技术A animation可以控制到每一帧
高版本的浏览器还支持css或者JS控制停止动画 以及获取动画当前状态等

translation只是一个过渡 只能设置 初始值和结束值