Transform

??根據我的理解，transform和width、height、background一樣，都是dom的屬性，不同的是它是css3旗下的，比較屌，能夠對原來的dom元素進行移動、縮放、轉動、拉長或拉伸，跟canvas上的某些api神似，這么說來transform好像能干些js才能干的事。

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

?

Transition

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

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

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

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

過渡屬性:

屬性描述CSS

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

Animation

??Animation的解釋是動畫，加強版的transition。

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

???主要應用在某個元素需要進行連續的n次css變換。

動畫屬性:

屬性描述CSS

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

轉載于:https://www.cnblogs.com/xuange306/p/4627052.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。