HTML前端開發之路--Animation_html/css

Animation用@keyframes去自定義一個變化過程 {}內部包含著動畫變化的關鍵幀例如：

@-webkit-keyframes mycolor {
 0%{
 background-color: brown;
 }
 40%{
 background-color: aqua;
 }
 70%{
 background-color: #555555;
 }
 100%{
 background-color: brown;
 }
 }

然后再根據相應的動作觸發動畫過程，比如hover，active等，animation和transition一樣有三個子屬性值，property，duration和timing-function

另外提一下，timing-function有5個值，linear，ease，ease-in，ease-out，ease-in-out；

linear：勻速變化；

ease-in：由慢到快；

ease-out：由快到慢；

ease和ease-in-out效果是一樣的，都是由慢到快再到慢；

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com