transition 過渡：一個元素在不同狀態(tài)之間切換時定義不同的過渡效果
屬性值：transition-property transition-duration transition-timing-function transition-delay 屬性名稱 持續(xù)時間 速度曲線 何時開始
實例代碼： transition: margin-right 4s ease-in-out 1s;
多種效果贝攒，以逗號分隔
實例代碼： transition: margin-right 4s, color 2s;
transition-property：指定哪個或哪些屬性用于過渡 也可用none/all表示沒有過渡動畫/所有可被動畫的屬性都表現(xiàn)過渡動畫
transition-duration：指定過渡的時長，不接收負值
transition-timing-function：指定一個函數(shù)时甚，定義屬性值怎么變化
ease
ease-in
ease-out
ease-in-out
cubic-bezier(1,1,1,1)
linear
step-start
step-end
steps(4, end)
transition-delay：規(guī)定在過渡效果開始之前需要等待的時間s/ms
transform 變換：旋轉隘弊、縮放、傾斜荒适、平移等操作 !只能轉換盒模型的
屬性值：matrix() translate() scale() rotate() skew()
實例代碼
rotate(19deg) 正角表示順時針旋轉梨熙，負角表示逆時針旋轉
scale() 增大/減小元素的大小
skew() 用于拉伸/平移
translate() 移動
animation 動畫：用來指定一組或多組動畫
屬性值： animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state
animation-name 設置動畫的名稱
animation-duration 設置動畫完成的周期
animation-delay 設置動畫什么時候開始
animation-timing-function：linear | ease | ease-in | ease-out | ease-in-out |step-start | step-end | steps(<integer>, <jump-start | jump-end | jump-none | jump-both | start | end>[]?) 設置動畫的速度曲線
animation-iteration-count：infinite | <number> 設置動畫播放的次數(shù)
animation-direction：normal | reverse | alternate | alternate-reverse 規(guī)定下一個周期是否逆向播放
每個循環(huán)內動畫向前循環(huán)，即結束后重置到起點重新開始
反向運行吻贿，由尾到頭
交替反向運行
反向交替，反向開始交替
animation-fill-mode：none | forwards | backwards | both 動畫停了之后位置什么狀態(tài)
animation-play-state：running | paused 動畫是否正在進行或暫停
<pre class="cm-s-default" style="color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">@keyframes slidein { from { transform: translateX(0%); } to { transform: translateX(100%); } } @keyframes identifier { 0% { top: 0; left: 0; } 30% { top: 50px; } 68%, 72% { left: 50px; } 100% { top: 100px; left: 100%; } }</pre>
三者的區(qū)別點：
transition是過渡哑子，強調樣式值得變化過程舅列，只有開始和結束；需要通過hover或js等事件來配合觸發(fā)卧蜓；只能觸發(fā)一次
animation也叫關鍵幀帐要，通過@keyframe結合可以設置中間幀得一個狀態(tài)；且可以不觸發(fā)事件就觸發(fā)過程弥奸；可觸發(fā)多次
transform是轉換榨惠，指的是改變元素得外觀，沒有動畫效果盛霎，唰的一下就改變了
