css動畫學習總結(jié)
動畫定義
- 以一定的速度（影視：每秒24幀箍邮；游戲每秒30幀）連續(xù)播放圖片，肉眼因視覺殘象產(chǎn)生的錯覺畫面吨凑。
瀏覽器渲染過程
- 根據(jù)HTML構(gòu)建HTML樹
- 根據(jù)CSS構(gòu)建CSS樹
- 合并HTML和CSS成一顆渲染樹（render tree）
- Layout布局（文檔流口猜、盒模型衔掸、計算大小和位置）
- Paint繪制（邊框顏色、文字顏色妆棒、陰影等）
- Composite合成（根據(jù)層疊關(guān)系展示頁面）
transition
- 一般在實現(xiàn)比較簡單的動畫效果（只有開始和結(jié)束兩種狀態(tài)）使用澡腾，可以補充中間幀。
- transition：屬性名 時長 過渡方式 延遲
例：transition：left 200ms linear 2s
也可以控制兩個不同屬性糕珊，用逗號隔開就行
例：transition：left 1s动分， top 2s
可以用all代表所有屬性
例：transition：all 2s
過渡方式有很多可以MDN查看 - 注意點：display: none => block 沒辦法過度，一般改成visibility: hidden => visible
animation
- 先定義@keyframes
或者@keyframes 動畫名 { from { transform: scale(1); } to { transform: scale(1.5); } }@keyframes 動畫名 { 0% {top: 0; left: 0;} 50% {top: 50px; left: 100px;} 100% {top: 25px; left: 120px;} } - 在要添加動畫的元素style里面加上animation
animation: 動畫名 時長 過渡方式 延遲 次數(shù) 方向 填充模式 是否暫停;
例animation: heart 1.5s ease-in 1s infinite alternate-reverse;
填充模式animation-fill-mode: forwards; 停在最后一幀
