Transform

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

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

?

Transition

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

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

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

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

過渡屬性:

屬性描述CSS

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

Animation

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

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

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

動畫屬性:

屬性描述CSS

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

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

總結(jié)

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

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