Transform

??根據(jù)我的理解，transform和width、height、background一樣，都是dom的屬性，不同的是它是css3旗下的，比較屌，能夠?qū)υ瓉淼膁om元素進(jìn)行移動(dòng)、縮放、轉(zhuǎn)動(dòng)、拉長或拉伸，跟canvas上的某些api神似，這么說來transform好像能干些js才能干的事。

??transform分2D變換和3D變換，w3school中有很好的介紹和例子

?

Transition

注意：在變換屬性時(shí)，變換前的屬性值必須定義；不然會(huì)沒有效果；

例:想讓width從 ? 100px ?---> ?200px ?時(shí)，前邊的100px必須指明。主要用在 ? ?img ? 的 寬高是要注意

??transition的解釋是過渡，我的理解是css之間的變換，但是這個(gè)變換很屌很平滑，類似動(dòng)畫。舉個(gè)栗子，一開始某個(gè)dom的類是classA，通過某種操作（比如被點(diǎn)擊了）后變成了classB，如果沒有transition，類之間的變換是很快的，機(jī)械般瞬間完成，但是有了transition，這便會(huì)是一個(gè)很緩和平滑的過程。

transition有4個(gè)屬性：語法：transition:?property?duration?timing-function?delay??從前到后4個(gè)屬性依次可理解成“過渡動(dòng)畫變換的屬性”、“過渡花費(fèi)時(shí)間”、“過渡過程的速度變化”和“過渡開始前的等待時(shí)間”（默認(rèn)值：all 0 ease 0 前兩個(gè)是必須的 后兩個(gè)可省略）。

過渡屬性:

屬性描述CSS

transition	簡寫屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過渡屬性。	3
transition-property	規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。	3
transition-duration	定義過渡效果花費(fèi)的時(shí)間。默認(rèn)是 0。	3
transition-timing-function	規(guī)定過渡效果的時(shí)間曲線。默認(rèn)是 "ease"。	3
transition-delay	規(guī)定過渡效果何時(shí)開始。默認(rèn)是 0。	3

Animation

??Animation的解釋是動(dòng)畫，加強(qiáng)版的transition。

??如果說transition能實(shí)現(xiàn)某些js效果，animation就更像是js了。類似于寫一個(gè)canvas特效，特效總共比如說多少時(shí)間，我們能規(guī)定在什么時(shí)候該出現(xiàn)什么樣的場景，而各個(gè)場景間的轉(zhuǎn)換則完全由css3本身負(fù)責(zé)，而keyframes好比定義了一個(gè)js方法。

???主要應(yīng)用在某個(gè)元素需要進(jìn)行連續(xù)的n次css變換。

動(dòng)畫屬性:

屬性描述CSS

@keyframes	規(guī)定動(dòng)畫。	3
animation	所有動(dòng)畫屬性的簡寫屬性，除了 animation-play-state 屬性。	3
animation-name	規(guī)定 @keyframes 動(dòng)畫的名稱。	3
animation-duration	規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。	3
animation-timing-function	規(guī)定動(dòng)畫的速度曲線。默認(rèn)是 "ease"。	3
animation-delay	規(guī)定動(dòng)畫何時(shí)開始。默認(rèn)是 0。	3
animation-iteration-count	規(guī)定動(dòng)畫被播放的次數(shù)。默認(rèn)是 1。	3
animation-direction	規(guī)定動(dòng)畫是否在下一周期逆向地播放。默認(rèn)是 "normal"。	3
animation-play-state	規(guī)定動(dòng)畫是否正在運(yùn)行或暫停。默認(rèn)是 "running"。	3
animation-fill-mode	規(guī)定對(duì)象動(dòng)畫時(shí)間之外的狀態(tài)。	3

轉(zhuǎn)載于:https://www.cnblogs.com/xuange306/p/4627052.html

總結(jié)

以上是生活随笔為你收集整理的CSS-Transform-transition-Animation的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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