- transition 過渡 連續的、從a到b
- transform 變換 旋轉、縮放、偏移
- animation 動畫
change{ width:100px; height:100px; background:yellow; transition:background 10s; } change:hover{ background:red; }
意思就是說先在change這個css樣式里面“聲明”：如果我的background屬性發生了變化，那么它的變化過程是連續變化（漸變），這個變化過程持續10s。
所以，transition 就是用來定義，當一個變化發生時，它變化的連續性和時間，以及連續過程的快慢情況的（先慢后快、先快后慢等）。
transition不控制變化的產生，而是只控制變化發生后的過渡效果。
2.使用
transition屬性是下面幾個屬性的縮寫:
- transition-property指定哪個屬性應用過渡，比如
transition-property:background就是指定background屬性應用過渡。 - transition-duration指定這個過渡的持續時間
- transition-delay過渡延遲多長時間開始
- transition-timing-function指定過渡動畫緩動類型，有
ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()
其中，linear線性過度，ease-in由慢到快，ease-out由快到慢，ease-in-out由慢到快在到慢。
使用transition可以將這些屬性合並來寫，順序為 屬性 持續時間 過渡類型 延遲時間
二、transform
1.理解
transition不控制變化的產生，與之相對，transform就是用來產生變化的，比如選擇，縮放等等。但是transform的變化是沒有過渡效果的，就是直接顯示變化過的樣子了，我們將transition和transform一起用，就能產生漸變的動畫效果了。比如旋轉，移動等等。
2.使用
2D轉換
- translate(x,y) 相對於當前位置移動 值100px 表示100像素 translateX() translateY()
- rotate(角度) 順時針旋轉（負值表示逆時針旋轉） 值30deg 表示30度
- scale(a,b) 尺寸縮放 值2 表示縮放2倍 scaleX() scaleY()
- skew( 角度,角度) 翻轉，x方向，y方向 值30deg 表示30度 skewX() skewY()
可以使用matrix(n,n,n,n,n,n)將這些變化整合在一起（實際上上面四個變換的本質都是通過 matrix 矩陣來實現的，如果要實現沒有提供的效果，可以通過這個函數直接控制）
【注】：transform變換的參照點默認為中心點，可以通過transform-origin(a,b)改變參照點的位置,a,b的值可以是百分比，px，em等，或者left center right top bottom center
3D轉換
- translate3d(x,y,z) 3D移動 translateX(x) translateY(y) translateZ(z)
- scale3d(x,y,z) 3D縮放 scaleX(x) scaleY(y) scaleZ(z)
- rotate3d(x,y,z,angle) 3D旋轉 rotateX(angle) rotateY(angle) rotateZ(angle)
- prespective(n) 透視視圖
transition和transform一起使用的例子：
.change{ transition:all 2s ease; } .change:hover{ transform:rotate(720deg) scale(2,2); }
三、animations
通過一起使用transition和transform已經可以實現一些動畫效果，但是對於復雜的動畫，使用animations更加合適。
1.簡介
@keyframes (關鍵幀)用於創建動畫，寫法：
@keyframes name{ from{//start css } to{//end css } } //or @keyframes name{ 0%{//start css } 50%{//center css } 100%{//end css } }
【注】：使用關鍵幀先定好動畫變換過程中的關鍵樣式，然后再使用連續變化或者不連續變化實現動畫效果
animation 通過關鍵幀產生動畫效果，所有動畫效果的簡寫屬性，例子：
div{ width:100px; height:100px; background:red; animation:myfirst 5s; } @keyframes myfirst{ from { background:red; } to { background:yellow; } }
2.屬性
animation-name @keyframes動畫的名稱
animation-duration 動畫完成一個周期所需的秒或者毫秒
animation-timing-function 動畫的速度曲線
- linear 勻速
- ease 默認 慢-快-慢
- ease-in 以快結束
- ease-out 以慢結束
- ease-in-out 以慢開始和結束 和ease的區別：ease-in-out中間部分是近似勻速的
- cubic-bezier(n,n,n,n) 貝塞爾曲線 n取值0或者1
- step-start 在幀間變化的過程中，以下一幀的顯示效果來填充間隔動畫，即不連續動畫（逐幀動畫）
- step-end 以上一幀的顯示效果來填充間隔動畫
- steps() 可以傳入兩個參數，第一個是一個大於0的整數，他是將間隔動畫等分成指定數目的小間隔動畫，然后根據第二個參數(start/end)來決定顯示效果。第二個參數設置后其實和step-start，step-end同義，在分成的小間隔動畫中判斷顯示效果。
animation-delay 動畫什么時候開始（秒或者毫秒）
animation-iteration-count 動畫被播放的次數 數字或者infinite(無限)
animation-direction 是否反向播放動畫
- normal 正常播放 正向
- reverse 反向播放
- alternate 動畫在奇數次正向播放，在偶數次反向播放
- alternate-reverse 動畫在奇數次反向播放，在偶數次正向播放
- initial 默認值
- inherit 從父元素繼承
animation-fill-mode 動畫不播放時，應用到元素的樣式
- none 默認，無
- forwards 動畫停留在結束幀
- backwords 動畫完成后停留在初始幀
- both 同時遵循forwards和backwords
- initial 默認值
- inherit 從父元素繼承
animation-play-state 動畫運行和暫停
- paused 暫停
- running 運行
3.animation簡寫
可以通過animation來將這些元素寫在一起：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
具體一點：
animation:myAnim 1s linear 1s infinite alternate both running;