過渡
過渡動畫過度效果邊界問題
滑鼠放置臨界點來回跳動
解決過渡邊界問題
將標籤設定為父子標籤
在父標籤設定一樣的寬高
屬性transition-duration: 0.3s; 持續時間 （0可以省略不寫）
transition-delay: 1s 延遲時間
transition-property：width | height | all 過渡樣式（預設所有樣式都有過渡效果）
第一狀態：
.box 第二狀態：
.hover:hover .box transition-timing-function 屬性 表示過渡運動曲線
transition-timing-function: cubic-bezier(0, 2.32, 1,-2.11);
transition-timing-function: linear | ease | ease-in-out | easa-in | ease-out | cubic-bezier();
-- linear：勻速
-- ease：慢快慢
-- ease-in-out：慢快慢
-- easa-in：慢快
-- ease-out：快慢
-- cubic-bezier()：貝賽爾曲線函式
@keyframes xx 100% }動畫動畫屬性
① animation-name 屬性 表示動畫名(名字任意起)
animation-name: ;
② animation-duration 屬性 表示動畫持續時間
animation-duration: ;
③ animation-delay 屬性 表示動畫延遲時間
animation-delay: ;
④ animation-timing-function 屬性 表示動畫運動曲線
animation-timing-function: linear | ease | ease-in-out | easa-in | ease-out | cubic-bezier();
-- linear：勻速
-- ease：慢快慢
-- ease-in-out：慢快慢
-- easa-in：慢快
-- ease-out：快慢
-- cubic-bezier()：貝賽爾曲線函式
⑤ animation-play-state 屬性 表示動畫狀態
animation-play-state: running | paused
-- running：執行
-- paused：暫停
⑥ animation-fill-mode 屬性 表示動畫結束後的停留位置
animation-fill-mode: forwards | backwards
-- forwards:終點
-- backwards:起點
⑦ animation-iteration-count 屬性 表示動畫次數
animation-iteration-count: | infinite
-- ：固定次數
-- infinite：無限次
⑧ animation-direction 屬性 表示運動方向
animation-direction: normal | alternate | alternate-reverse;
-- normal：原起點為第一次運動的起點，且永遠從起點向終點運動
-- alternate：原起點為第一次運動的起點，且來回運動
-- alternate-reverse：原終點變為第一次運動的起點，且來回運動
7 過渡與動畫
1.元素位移 參照點 左上角 transform translate x px,y px 執行完畢後會恢復到原始狀態 可與 transition transform 3s 實現過渡效果 2.元素縮放 參照點 中心 transform scale 倍數 3.旋轉 transform rotate x ...
複習（css過渡與動畫）
用於在乙個屬性中設定四個過渡屬性。div div hover 效果 當滑鼠移上去的時候這個正方形的寬度會增加 300 畫素 實現四個功能 旋轉，傾斜，縮放，位移 div div hover translate x y 位移 rotate 旋轉 transform rotate 角度deg 負 右 正...
Activity過渡動畫
1.android5.x提供了三種transition型別1 進入 activity所有檢視進入螢幕。2 退出 activity所有檢視退出螢幕。3 共享元素 activity之間的過渡。進入和退出效果包括 explode 分解 從螢幕中間進或出，移動檢視。side 滑動 從螢幕邊緣進或出，移動檢視...