你与光皆失改第一个字光

点击联系发帖人 时间：2020-02-16 14:19

第一个字光

本篇文章介绍CSS动画的各种知识, 补間动画,逐帧动画,动画原则, 并且通过一个实际例子彻底理解CSS动画.

本篇文章不一一列举CSS3动画的属性若需要了解API，可前往 MDN 在开始栗子前我们先补补基础知识。

2. delay属性：用于将动画与其他动画的执行时机错开将动画落到不同的时间点。这个属性很好用

Css 动画配匼JS使用有些情况我们需要确保动画结束后再进行另外一些交互，可使用该事件监听

实战演习假如我们需要实现一个这样简单的动画：

仔細观察上面的动画，我们发现它可以由以下3部分组成： 实现方法：使用3个dom元素，最外层dom实现入场动画第二层dom实现左右移动，第三层dom实現逐帧动画优点：调试方便，节省时间缺点：dom多。

2. 分析动画形成的时间轴：

入场动画持续0.6s只播放一次，左右移动以及逐帧动画持续2s循环播放，代码如下：

蹬蹬蹬效果如下面所示，是不是很失望

原因：由于animation默认以ease方式过渡它会在每个关键帧之间插入补间动画，所鉯动画效果是连贯性的此时可以使用steps()取消补间动画。 贴一个图：

完整的css代码如下： (可以直接用下面的代码加上面的图片完成一个demo)

总结一个复杂的动画,通过梳理分层, 就可以简单的实现出来, 试着重新看看你的动画把~

- 回复加群，邀你进技术群长期技术交流学习

原创不易，如果觉得有点用希望可以随手转发或者”在看“，拜谢各位老铁

游愙，本帖隐藏的内容需要积分高于才可浏览您当前积分为 0

}

你与光皆失 改第一个字光