1-2-13 【CSS3】CSS的动画

题外话：再肝一章~

---

文章内容输出来源：拉勾教育大前端就业集训营

1.概述

• 概述：css3中提供了自己的动画制作方法，这可以在许多网页中取代动画图片、Flash 动画以及JavaScript。
• 步骤：css3动画制作分为两步：创建动画、绑定动画。

2.创建动画——@keyframes规则

• 概述：@keyframes规则用于创建动画。其中规定某项CSS样式，就能创建由从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。
• 多过程控制：需要使用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%。0%是动画的开始，100% 是动画的完成。
• 书写方法：

@keyframes 自定义名称{
    动画过程1{
        CSS样式变更
    }
    动画过程2{
        CSS样式变更
    }
    ...
}

• 举个例子：

说明：以上只是创建了一个动画，因为没有绑定所以无法播放。用百分比定义了5个阶段，每个阶段代表在Y轴上不同的位置。

3.绑定动画——animation属性

• 概述：动画创建好了之后，需要指定一个对象来完成这个动画，也就是在一个选择器中，添加animation属性，否则不会产生动画效果。
• 书写方式：

选择器{
    animation: 动画名称 过渡时间 贝塞尔曲线 动画次数 延迟播放时间；
}

• 举个完整的例子：

说明：通过animation来绑定设置好的动画，即可让对应的元素动起来啦~如果不设置播放次数，则默认播放1次。

• 单一属性：

属性	说明
animation-name	规定@keyframes动画的名称
animation-duration	规定动画完成一个周期所需要的时间，s或ms为单位
animation-timing-fuction	指定动画的时间曲线（贝塞尔曲线）
animation-delay	规定动画开始的时间
animation-iteration-count	动画播放的次数，infinite表示无限次

浏览器兼容

• Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
• Chrome 和 Safari 需要前缀 -webkit-。
• Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

前端文章汇总目录

https://www.jianshu.com/p/6d80dd616ff4

---

结束语：一花一世界，一木一浮生，愿与诸君共勉