前言上一篇文章主要讲述了CSS样式变化中的二维变换。在本文中，我们将介绍过渡和动画在CSS样式更改中的基本用法。1、过渡元素逐渐从一种样式变为另一种样式div{transition:width1s;-moz-transition:width1s;/*Firefox4*/-webkit-transition:width1s;/*Safari和Chrome*/-o-transition:width1s;/*Opera*/}transition-property：应用transition的css属性名称，如widthwidthtransition-duration：转场效果所花费的时间，如1stransition-timing-function：转场的时间曲线效果如下：linearuniformspeedeasefirstslowandthenfastease-inslowstartease-outslowendease-in-outslowstartandendcubic-bezier(n,n,n,n)cubic-bezie函数中定义你自己的值，可能的值是0到1之间的值transition-delay：当过渡效果开始时比如1s2。动画Animation1).首先定义@keyframes规则@keyframesmy{from{background:red;}to{background:yellow;}}@-moz-keyframesmy/*Firefox*/{from{background:red;}to{background:yellow;}}@-webkit-keyframesmy/*SafariandChrome*/{from{background:red;}to{background:yellow;}}@-o-keyframesmy/*Opera*/{from{background:red;}to{background:yellow;}}为了丰富元素的变化过程，可以把Fromto改为百分比：@keyframesmy{0%{background:red;}25%{background:yellow;}50%{背景：蓝色；}100%{背景：绿色；}}@-moz-keyframes我的/*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;}animaanimation-name选择器的关键帧的名称animation-duration动画花费的时间animation-timing-function匀速播放动画animation-delay动画开始需要多长时间animation-iteration-count动画播放次数animation-direction下一循环是否反向播放normalnormalplay交替反向播放动画完成，在animation-delay指定的时间段内保持最后一个属性值向后，在动画显示之前，应用start属性值。应用前向和后向填充模式。参考文档：W3C官方文档（CSS篇）总结知识，希望能让大家对CSS样式变化有一个简单的了解和了解。了解更多Python爬虫和数据挖掘专业网站：http://pdcfighting.com/了解更多Python网络爬虫和数据挖掘专业网站：http://pdcfighting.com/
