前言本文将介绍CSS样式变化中过渡和动画的基本用法。1.过渡元素逐渐从一种样式变为另一种样式。div{transition:width1s;-moz-transition:width1s;/*Firefox4*/-webkit-transition:width1s;/*Safari和Chrome*/-o-transition:width1s;/*Opera*/}transition-property:app转场css属性名称，如widthwidthtransition-duration：转场效果所花费的时间，如1stransition-timing-function：转场效果的时间曲线如下：linearuniformspeedeasefirstslowandthenfastease-inslowspeedstartease-outslowFastendease-in-outSlowstartandendcubic-bezier(n,n,n,n)在cubic-bezie函数中定义自己的值，可能的值有valuesbetween0and1transition-delay：当过渡效果开始时像1s2。动画Animation1).首先定义@keyframes规则@keyframesmy{from{background:red;}to{background:yellow;}}@-moz-keyframesmy/*Firefox*/{from{background:red;}to{background:yellow;}}@-webkit-keyframesmy/*Safari和Chrome*/{from{background:red;}to{background:yellow;}}@-o-keyframesmy/*Opera*/{from{background:red;}to{background:yellow;}}为了丰富元素的变化过程，可以从到变为百分比：@keyframesmy{0%{background:red;}25%{background:yellow;}50%{background:blue;}100%{background:green;}}@-moz-keyframesmy/*Firefox*/{0%{background:red;}25%{background:yellow;}50%{background:blue;}100%{background:green;}}@-webkit-keyframesmy/*Safari和Chrome*/{0%{background:red;}25%{background:yellow;}50%{background:blue;}100%{background:green;}}@-o-keyframesmy/*Opera*/{0%{background:red;}25%{background:yellow;}50%{background:blue;}100%{background:green;}}定义好了，那么我们就可以开始我们的动画了2).animation启动动画效果div{animation-name:my;animation-duration:5s;animation-timing-function:linear;animation-delay:2s;animation-iteration-count:infinite;animation-direction:alternate;animation-play-state:running;/*Firefox:*/-moz-animation-name:my;-moz-animation-duration:5s;-moz-animation-timing-function:linear;-moz-animation-delay:2s;-moz-animation-iteration-count:infinite;-moz-animation-direction:alternate;-moz-animation-play-state:running;/*Safari和Chrome:*/-webkit-animation-name:my;-webkit-animation-duration:5s;-webkit-animation-timing-function:linear;-webkit-animation-delay:2s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:alternate;-webkit-animation-play-state:running;/*Opera:*/-o-animation-name:my;-o-animation-duration:5s;-o-animation-timing-function:linear;-o-animation-delay:2s;-o-animation-iteration-count:infinite;-o-animation-direction:alternate;-o-animation-play-state:running;}animation-name选择器的关键帧的名称animation-danimation-timing-function匀速播放动画animation-delay动画需要多长时间开始animation-iteration-count动画播放次数-statepausedanimationpausedanimationpausedrunninganimationisplayinganimation-fill-modenone动画完成时不向前填充，保持最后一个属性值向后填充一段由animation-delay指定的时间，在动画显示之前，应用start属性向前和向后填充模式都适用。参考文档：W3C官方文档（CSS文章）总结本文主要介绍CSS样式变化章节中过渡和动画的基础知识，希望能让大家对CSS样式变化有一个更简单易懂的认识和理解。
