CSS3过渡动画（四）

你好，欢迎打开我的博客，阿雨每天与你分享许多有趣新鲜的knowledge！

最近给大家带来的是WEB前端中重要的一部分，一些有关CSS的基础知识，俗话说的好“万丈高楼平地起”，要想做一个优秀的前端人员，必须打好基础哦。

废话不多说，上干货
帧动画
一，定义关键帧
设计帧动画之前，应该先定义关键帧，CSS3使用@keyfrances命令来定义关键帧
参数如下：
animationname：定义动画名称
keyfrance-selector:定义帧的时间位置（动画时长百分比）
css-styles:表示一个或多个合法的CSS样式属性
设计过程：
第一步，新建HTML文档，设计一个简单的盒子和包含框

第二步，在样式表中定义关键帧，共包括5帧，在时间轴上的位置分别为0%，25%，50%，75%，100%

第三步，定义包含框为定位包含框，然后定义包含的盒子定位在包含框中

二，定义帧动画
相同点：都是通过改变的CSS属性来模拟动画
不同点：过渡动画只能指定属性的初始值和结束值，然后进行平滑过渡；帧动画可以指定多个关键帧，然后在不同关键帧进行平滑过渡，关键帧动画可以自动播放
animation-name 定义CSS动画名称
animation-duration 定义CSS动画播放时间
animation-timing-function 定义CSS动画类型
animation-delay 定义CSS动画延迟播放时间
animation-iteration-count 定义CSS动画播放次数
animation-direction 定义CSS动画播放方向
animation-play-state 定义动画正在运行，还是暂停
animation-fill-mode定义CSS动画外状态

第一步，新建HTML文档

第二步，设计舞台样式，其中导入的小人图片是一个序列跑步任务


第三步，设计动画关键帧

第四步，设置动画属性
第五步，启动动画，设置频率

好了，今天的干货分享就结束了，如果感觉阿雨的分享对你有帮助的，就关注我吧！！！
创作不易，感谢有你，一路同行，加油！