-
過度 transition
使元素由一種樣式變成另一種樣式 (盡量不要寫到偽類中)
過度transition的值: transition是一個復(fù)合屬性: 類似于background, 其中：
transition-property: 規(guī)定過渡作用在元素的哪條樣式上
none:沒有過渡屬性(清除); all:對所有可能樣式生效(默認(rèn)值); width/height/… 多個以逗號分隔
transition-duration:
過渡時長, 單位秒(s)和毫秒(ms)值是0虑瀑，不寫時長等于看不到效果
transition-delay:
過渡開始前的等待時間痊乾， 不計入過渡時間中
注意： transition-delay在恢復(fù)也生效
transition-timing-function: (過渡時間的速度函數(shù)), 常見值如下:
ease,先慢后快后慢(默認(rèn)值); linear,勻速 , ease-in; 勻加速, ease-out县匠； 勻減速, ease-in-out; 快->慢->快
cubic-bezier(貝塞爾曲線): 一個帶參數(shù)的曲線禾乘，用于描述運(yùn)動速度的變化洲守，可以非常精確自由方便的控制變化速率
cubic-bezier(x1,y1,x2,y2); 其中x1,x2在[0,1]中,y1,y2不限, 具體參考:http://cubic-bezier.com
transition復(fù)合寫法:
transition: 作用樣式 時長 變化曲線 延時 (只有時長不可省略)
.box {
width: 100px;
height: 100px;
trnnsition-property: width; /* 只有寬度有過度效果 */
transition-duration: 1s;
transition-delay: 1s; /* 變化延時一秒才觸發(fā) */
transition-timing-function: linear;
/* transition: width 1s linear 0.5s */ /* 復(fù)合寫法 */
}
-
動畫 animation
自定義動畫: @keyframes
最小0%,最大100%硬毕；合法樣式任意多個臭觉，每個百分比為關(guān)鍵幀
@keyframes move { /* 關(guān)鍵幀描述, 用來給animation運(yùn)動的 */
from { /* 關(guān)鍵幀 開始 */
width: 100px;
}
to { /* 結(jié)束 */
width: 300xp;
}
/* 0% {
width: 100px;
}
50% {
width: 300px;
}
100% {
width: 200px;
} */
}
.box {
width: 100px;
height: 100px;
background-color: red;
animation-name: move; /* 自定義動畫名稱 */
animation-duration: 2s; /* 動畫執(zhí)行時間 */
animation-delay: 2s; /* 延時, 負(fù)數(shù)代表提前運(yùn)動 */
/* animation: 2s move; */ /* 復(fù)合寫法 */
}
animation-name 自定義動畫名稱, (調(diào)用自定義動畫)
animation-duration 動畫執(zhí)行時長（s/ms）
animation-delay： (支持負(fù)數(shù))
動畫延時（s/ms）
animation-timing-function 動畫速度曲線
linear/ease/ease-in/ease-out/ease-in-out和cubic-bezier(x1,y1,x2,y2), 類似于transition-timing-function steps(n) 逐幀動畫
animation-iteration-count 次數(shù)數(shù)值
infinite（關(guān)鍵詞柱查，無限重復(fù)次數(shù)）
animation-direction 執(zhí)行方向與執(zhí)行狀態(tài)
normal正常, alternate正反輪流播放(需要多次運(yùn)動,才能看到效果)
animation-play-state:paused暫停動畫, running運(yùn)行動畫
animation-fill-mode: 動畫結(jié)束之后的狀態(tài) (只能運(yùn)用于結(jié)束動畫之后)
none;不改變（默認(rèn)）
forwards: 動畫完成停留在最后一個關(guān)鍵幀中
backwards: 在動畫開始之前的延時階段知残，應(yīng)用0%的關(guān)鍵幀
both: 向前向后都應(yīng)用
animation-direction: 動畫的播放方向 (多次運(yùn)動才能觸發(fā)次效果)
normal; (正常播放靠瞎，結(jié)束后會回到起點，默認(rèn))
alternate: 播放結(jié)束之后反向回到開頭,偶數(shù)次反向
reverse：反向播放求妹，和normal相反
alternate-reverse：先反后正乏盐，和alternate相反
animation復(fù)合寫法:
animation：動畫名 時長 運(yùn)動速度曲線 延時 運(yùn)動次數(shù) 播放方向
animation: move 3s linear 0s infinite alternate-reverse;
