觀看金魚都能懂的網頁設計入門:18、19
在網頁上若要呈現動畫,可儘量使用css語法做設計,能不用到javascript就不用,這樣可以降低其網路加載速度
https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
透過transition 速度部分,可以使用漸變函式 (transition timing function),來改變速度從開始到結束的變化
transition: 屬性 轉換時間 延遲執行時間 速度
https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Animations/Using_CSS_animations
infinite可以做重複播放
animation 動畫名稱 播放時間 延遲執行的時間 速度 次數
方向 填充模式 播放狀態
@ketframes 動畫名稱{
0%{}
100%{}
}
https://codepen.io/mikeyam/pen/mdPvYYP 小練習