用於設定元素的樣式過度
transition: property duration timing-function delay;
- property 規定設定過渡效果的 css 屬性的名稱
- duration 規定完成過渡效果需要多少秒或毫秒，預設0
- timing-function 規定速度效果的速度曲線
|___ease(預設值): 先快再快再慢
|___ease-in: 淡入(動畫剛開始的時候變化慢)
|___ease-out: 淡出(動畫快結束的時候變化慢)
|___ease-in-out: 淡入淡出
|___linear: 勻速變化
|___cubic-bezier(少用): 貝塞爾曲線,所有的變化都可以用貝塞 爾曲線來代替cubic-bezier(x1,y1,x2,y2),x1,y1,x2,y2值的範圍都是0~1
- delay 定義過渡效果何時開始1s，不寫預設0,一定是s單位，0s
animation: name duration timing-
function delay iteration-count direction play-state fill-mode;
- name 呼叫@keyframes定義好的動畫，與其動畫名稱一致
|___例如：@keyframes box 50%
100%
- timing-
function 規定速度效果的曲線，屬性值同transition一樣
- delay 開始等待的時間，即延遲幾秒開始1s
(按時間軸順序)
,reverse
(時間軸反方向執行)
,alternate
(輪流，即來回往復進行)
,alternate-
reverse
(動畫先反執行再正方向執行，並持續交替執行)
- play-state 控制動畫的暫停和繼續，running
(繼續)
，paused
(暫停)
- fill-mode 控制動畫結束後停留狀態，屬性如下
|___none 回到動畫沒開始時的狀態
|___forwards 動畫結束後動畫停留在結束狀態
|___backwords 動畫回到第一幀的狀態
|___both 根據animation-direction輪流應用forwards和backwards規則，注意與iteration-
count不要衝突
(動畫執行無限次)
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
animation-name 動畫名稱
animation-duration 動畫指定需要多少秒或毫秒完成值：time 預設值為 0，意味著沒有動畫效果
animation-timing-function 設定動畫如何完成乙個週期值：linear 勻速
ease 先慢後快，結束前變慢 預設
ease-in 低速開始
ease-out 低速結束
ease-in-out 低速開始和結束
cubic-bezier(n,n,n,n) 在 cubic-bezier 函式中自己的值。可能的值是從 0 到 1 的數值
animation-delay 動畫在啟動前的延遲間隔值：time 預設值為 0
animation-play-state 動畫是否正在執行或已暫停值：paused 指定暫停動畫
running 指定正在執行的動畫，預設
initial 設定屬性為其預設值
inherit 從父元素繼承屬性 元素的旋轉、縮放、移動等等，和動畫沒什麼關係，只是原來配合過渡
transform: none|transform-functions(可多個值，空格隔開)
|___例如：transform: rotate(180deg) scale(.5, .5);
- none 定義不進行轉換。
- matrix(n,n,n,n,n,n) 定義 2d 轉換，使用六個值的矩陣。
- matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定義 3d 轉換，使用 16 個值的 4x4 矩陣。
- translate(x,y) 定義 2d 轉換。
- translate3d(x,y,z) 定義 3d 轉換。
- translatex(x) 定義轉換，只是用 x 軸的值。
- translatey(y) 定義轉換，只是用 y 軸的值。
- translatez(z) 定義 3d 轉換，只是用 z 軸的值。
- scale(x,y) 定義 2d 縮放轉換。
- scale3d(x,y,z) 定義 3d 縮放轉換。
- scalex(x) 通過設定 x 軸的值來定義縮放轉換。
- scaley(y) 通過設定 y 軸的值來定義縮放轉換。
- scalez(z) 通過設定 z 軸的值來定義 3d 縮放轉換。
- rotate(angle) 定義 2d 旋轉，在引數中規定角度。
- rotate3d(x,y,z,angle) 定義 3d 旋轉。
- rotatex(angle) 定義沿著 x 軸的 3d 旋轉。
- rotatey(angle) 定義沿著 y 軸的 3d 旋轉。
- rotatez(angle) 定義沿著 z 軸的 3d 旋轉。
- skew(x-angle,y-angle) 定義沿著 x 和 y 軸的 2d 傾斜轉換。
- skewx(angle) 定義沿著 x 軸的 2d 傾斜轉換。
- skewy(angle) 定義沿著 y 軸的 2d 傾斜轉換。
- perspective(n) 為 3d 轉換元素定義透視檢視。
CSS 3D動畫筆記
3d 在2d的基礎上新增 z 軸的變化 3d 位移 在2d的基礎上新增 translatez 或者使用translate3d translatez 以方框中心為原點，變大 3d 縮放 在2d的基礎上新增 scalez 或者使用scale3d scalez 和 scale3d 函式單獨使用時沒有任何效...
js動畫筆記
js動畫有乙個物體變大變小，就是他的style屬性在變化。可以用原生js做到，也可以用jquery做，我們今天說的js原生動畫基礎。這裡動畫效果，我們會用到定時器這個東西。我們先說一下定時器的用法。在js中定時器有這個函式 setinterval function time 週期的呼叫一段 後面的t...
flex 動畫筆記
1 不涉及到元件寬度和高度變化的 如果類似showeffect等屬性不好使的，直接使用hideeffect.end showeffect.play 等這樣的用法。2 涉及到元件寬度和高度變化的 在執行動畫期間，需要把顯示區域的visible設定成false。s parallel duration 5...