屬性

transition（4個(gè)屬性）:

transition: width 5s ease 3s; /*簡(jiǎn)寫*/transition-property: width; /*過渡屬性名*/transition-duration: 5s; /*持續(xù)時(shí)間，默認(rèn)為0*/transition-timing-function: ease; /*速度*/transition-delay: 3s; /*延遲*/

animation（7+個(gè)屬性）

animation: myfirst 5s linear 2s infinite alternate backwards;/*簡(jiǎn)寫*/ /*參數(shù)依次是： name/duration/timing-function/delay/iteration-count/ direction （方向，重復(fù)多次時(shí)起作用，表示是否逆向播放，alternate逆向/ play-state（動(dòng)畫狀態(tài)，running開啟）/ fill-mode (動(dòng)畫結(jié)束時(shí)候的停留位置，backwards開始幀停留，forward結(jié)束幀停留)*/ /* infinite:無(wú)限次的 */

transform 又是什么

元素的一個(gè)移動(dòng)屬性，修改具體的參數(shù)，元素會(huì)做靜態(tài)移動(dòng)，也可以作為動(dòng)畫的變化屬性；包含5個(gè)值：

translate3d(x,y,z) 控制元素在頁(yè)面上的三軸的位置；

rotate(deg) 旋轉(zhuǎn)角度；

skew[x,y](deg) 傾斜度的；

scale3d(x,y,z) 放大縮小，屬性是比值；

matrix3d，css矩陣。通過這個(gè)矩陣屬性，涵蓋了上面所有的屬性值，數(shù)學(xué)性較強(qiáng)。

區(qū)別

transition只能設(shè)置開始與結(jié)束2個(gè)關(guān)鍵幀的狀態(tài),多個(gè)關(guān)鍵幀可以使用 @keyframes 規(guī)則撰寫動(dòng)畫

transition: width 2s ease, height 2s ease;@keyframes addWidth{from{width:100px; /*一般的元素屬性變化*/transform: translate3d(-500%,0,0); /*transform控制的變化*/}to{width:200px;transform: none;}} /*或者用0%到100%*/ @keyframes addWidth{0%{width:100px;}50%{width:200px;}100%{width:100px;}}

觸發(fā)條件：transition通常和hover等事件配合使用，由事件觸發(fā)。animation則和gif動(dòng)態(tài)圖差不多，立即播放。

循環(huán)：animation可以設(shè)定循環(huán)次數(shù)

與JavaScript的交互：animation與js的交互不是很緊密。tranistion和js的結(jié)合更強(qiáng)大。js設(shè)定要變化的樣式，transition負(fù)責(zé)動(dòng)畫效果。

詳細(xì)分析見這篇文章：

兼容處理

/*CSS樣式，animation一樣*/ -webkit-transition: all .5s ease; /*--chrome,safari--*/ -moz-transition: all .5s ease; /*--firefox--*/ -ms-transition: all .5s ease; /*--IE--*/ -o-transition: all .5s ease; /*--opera--*/ transition: all .5s ease; /*--W3C--*//*寫動(dòng)畫*/ @-webkit-keyframes demo{/*--chrome,safari--*/} @-moz-keyframes demo{/*--firefox--*/} @-ms-keyframes demo{/*--IE--*/} @-o-keyframes demo{/*--opera--*/} @keyframes demo{ /*--W3C--*/}

詳細(xì)參考：
https://www.w3.org/TR/css3-animations/

轉(zhuǎn)載于:https://www.cnblogs.com/flora-dn/p/7240541.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的css动画详解 (transition animation)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。