animation 循环_强大的CSS动画：Transition与Animation

本文总结CSS3中两个用来做动画的属性，一个是transition，另一个是animation。

差异比较

CSS3差异transition在给定的持续时间内平滑地更改属性值(从一个值到另一个值)，也就是只需要指定开始与结束的参数，参数改变时就触发动画。常用语鼠标事件(:hover、active、:focus、:click)或键盘输入时触发需要事件触发，无法在网页加载时自动发生。一次性，不能重复发生，除非一再触发。只能定义开始状态和结束状态，不能定义中间状态。animation可以自行写动画开始、进行间、结束时各阶段的变化，适合用来做较细微的动画表现。需要明确的指定关键帧(@keyframe)的参数。网页加载时会直接执行，可以自行控制各阶段动画的变化

animation和transition最大的不同在于transition是当参数改变时触发，而animation则是直接就执行，所有动画效果需要明确的指定关键帧的参数。

CSS3简写顺序transitionproperty名称timing-function特效animationname名称timing-function特效iteration-count次数fill-mode填充模式

浏览器支持

transition写法

.box { width: 100px; height: 100px; background-color: purple; transition: width 2s ease-in 2s;}.box:hover { width: 200px; height: 200px; background-color: red;}

animation写法

.box { width: 100px; height: 100px; border: 1px solid #ccc; animation: change 5s; /*8个属性中至少要有名称、时间*/}/*设定开始与结束状态*//*from 就是0%，to 就是100%*/@keyframes change { from { background-color: #4BC0C8; } to { background-color: #C779D0; }}.box { width: 100px; height: 100px; border: 1px solid #ccc; animation: change 5s; /*8个属性中至少要有名称、时间*/}/*设定开始与结束状态*//*from 就是0%，to 就是100%*/@keyframes change { 0% { background-color: #4BC0C8; } 20% { background-color: #C779D0; } 60% { background-color: #FEAC5E; } 80% { background-color: #185a9d; } 100% { background-color: #4BC0C8; }}

属性值animation-name@keyframes后的名称animation-duration时间time以秒计算，如3s initial预设值inherit继承父层animation-timing-function特效linear等速、ease、ease-in、ease-out、ease-in-out、step-start、step-end、steps(int,start/end)、cubic-bezier(n,n,n,n)可上官网取值使用animation-delay以秒计算，如2sanimation-iteration-count次数number预设值为1，因此填2时，动画跑的次数为1+2=3次infinite无限循环animation-direction方向normal、reverse反向、alternate先反后正animation-fill-modeforwards使用关键帧最后的值backwards使用最开始的值bothanimation-play-state播放状态pause暂停running为预设值initial预设值、inherit继承父层

Animation.css

为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为全栈工程师，乃至架构师的路上披荆斩棘。在这里欢迎大家关注小编，私信学习，欢迎大家一起交流讨论，学习交流，共同进步。

当真正开始学习的时候难免不知道从哪入手，导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握，学习时频繁踩坑，最终浪费大量时间，所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们，祝福大家在往后的工作与面试中一切顺利。