今天小编跟大家讲解下有关css3动画 Transition ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css3动画 Transition 的相关资料，希望小伙伴们看了有所帮助。
css transitions提供了一种在更改css属性时控制动画速度的方法。
其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 css transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。
css transitions可以决定哪些属性发生动画效果 (明确地列出这些属性)，何时开始 (设置 delay），持续多久 (设置 duration) 以及如何动画 (定义timing funtion，比如匀速地或先快后慢)。
可动画属性的列表是：
-moz-outline-radius-moz-outline-radius-bottomleft-moz-outline-radius-bottomright-moz-outline-radius-topleft-moz-outline-radius-topright-webkit-text-fill-color-webkit-text-stroke-webkit-text-stroke-colorallbackdrop-filterbackgroundbackground-colorbackground-positionbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-widthborder-colorborder-end-end-radiusborder-end-start-radiusborder-leftborder-left-colorborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-widthborder-start-end-radiusborder-start-start-radiusborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-widthborder-widthbottombox-shadowcaret-colorclipclip-pathcolorcolumn-countcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-widthcolumn-widthcolumnsfilterflexflex-basisflex-growflex-shrinkfontfont-sizefont-size-adjustfont-stretchfont-variation-settingsfont-weightgapgrid-column-gapgrid-gapgrid-row-gapgrid-template-columnsgrid-template-rowsheightinsetinset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-startleftletter-spacingline-clampline-heightmarginmargin-bottommargin-leftmargin-rightmargin-topmaskmask-bordermask-positionmask-sizemax-heightmax-linesmax-widthmin-heightmin-widthobject-positionoffsetoffset-anchoroffset-distanceoffset-pathoffset-positionoffset-rotateopacityorderoutlineoutline-coloroutline-offsetoutline-widthpaddingpadding-bottompadding-leftpadding-rightpadding-topperspectiveperspective-originrightrotaterow-gapscalescroll-marginscroll-margin-blockscroll-margin-block-endscroll-margin-block-startscroll-margin-bottomscroll-margin-inlinescroll-margin-inline-endscroll-margin-inline-startscroll-margin-leftscroll-margin-rightscroll-margin-topscroll-paddingscroll-padding-blockscroll-padding-block-endscroll-padding-block-startscroll-padding-bottomscroll-padding-inlinescroll-padding-inline-endscroll-padding-inline-startscroll-padding-leftscroll-padding-rightscroll-padding-topscroll-snap-coordinatescroll-snap-destinationscrollbar-colorshape-image-thresholdshape-marginshape-outsidetab-sizetext-decorationtext-decoration-colortext-emphasistext-emphasis-colortext-indenttext-shadowtoptransformtransform-origintranslatevertical-alignvisibilitywidthword-spacingz-indexzoom属性详情请参考：https://developer.mozilla.org/zh-CN/docs/Web/css/css_animated_properties
例子：
<body> <p>盒子的多个属性一起动画: width, height, background-color, transform. 将光标悬停在盒子上查看动画。</p> <div></div></body>.box { border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000FF; -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s; transition:width 2s, height 2s, background-color 2s, transform 2s;}.box:hover { background-color: #FFCCCC; width:200px; height:200px; -webkit-transform:rotate(180deg); transform:rotate(180deg); }transition没有无限循环。
transition是由多个属性值组成的简写属性。依次包括：
transition-property指定哪个或哪些 css 属性用于过渡。只有指定的属性才会在过渡中发生动画，其它属性仍如通常那样瞬间变化。
transition-duration指定过渡的时长。可以指定多个时长，每个时长会被应用到由transition-property指定的对应属性上。如果指定的时长个数小于属性个数，那么时长列表会重复。如果时长列表更长，那么该列表会被裁减。
transition-timing-functioncss属性受到transition的影响，会产生不断变化的中间值，而transition-timing-function属性用来描述这个中间值是怎样计算的。实质上，通过这个函数会建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变。这条加速度曲线被transition-timing-function所定义，之后作用到每个css属性的过渡。可以规定多个timing function，根据transition property的列表给每个css属性应用相应的timing function。如果timing function的个数比transition property中数量少，缺少的值被设置为初始值（ease） 。如果timing function比transition property要多，timing function函数列表会被截断至合适的大小。
transition-timing-function的取值：
transition-timing-function: easetransition-timing-function: ease-intransition-timing-function: ease-outtransition-timing-function: ease-in-outtransition-timing-function: lineartransition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)transition-timing-function: step-starttransition-timing-function: step-endtransition-timing-function: steps(4, end)来源：爱蒂网
