本文总结了CSS3中用于动画的两个属性，一个是transition，一个是animation。差异比较CSS3差异过渡在给定的持续时间内平滑地改变属性值（从一个值到另一个值），即你只需要指定开始和结束参数，当参数改变时就会触发动画。常用的鼠标事件（:hover,active,:focus,:click）或键盘输入都需要事件触发，这些事件不会在网页加载时自动发生。一次性，除非反复触发，否则不会再次发生。只能定义起始状态和结束状态，不能定义中间状态。动画可以自己写出动画开始、进行、结束各阶段的变化，适合细微的动画表现。需要明确指定关键帧（@keyframe）的参数。网页加载完成后直接执行，可以自己控制每个阶段动画的变化。animation和transition最大的区别是transition是在参数改变的时候触发，而animation是直接执行的。所有的动画效果都需要明确指定关键帧的参数。CSS3缩写sequencetransition属性名timing-function特效animationname名称timing-function特效迭代次数-count次fill-mode填充模式浏览器支持transition写法.box{width:100px;高度：100px；背景色：紫色；transition:width2sease-in2s;}.box:hover{width:200px;高度：200px；background-color:red;}animationwriting.box{width:100px;高度：100px；边框：1px实心#ccc；动画：改变5s；/*8个属性必须至少有名称和时间*/}/*设置开始和结束状态*//*from为0%，to为100%*/@keyframeschange{from{background-color:#4BC0C8;}到{背景色：#C779D0;}}.box{宽度：100px；高度：100px；边框：1px实心#ccc；动画：变化5s；///*设置开始和结束状态*//*from为0%，to为100%*/@keyframeschange{0%{background-color:#4BC0C8;}20%{背景颜色：#C779D0；}60%{背景颜色：#FEAC5E；}80%{背景颜色：#185a9d；}100%{背景颜色：#4BC0C8；}}属性值animation-name@keyframes在名称animation-durationtime时间之后以秒为单位计算，如3s初始默认值inherit继承父层animation-timing-function特效线性恒速，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=3infiniteinfiniteloopanimation-directiondirectionnormal,reversereverse,alternateanimation-fill-modeforwards使用关键帧的最后一个值backwards使用初始值bothanimation-play-stateplaybackstatepausepauserunning为默认值initial默认值，inherit继承父层Animation.css官网下载：Animate.css
