動畫 · 隨堂筆記-JAVA103班

## 動畫 ### 1.漸變動畫 `transition`動畫可以控制HTML組件的某個屬性發生改變時經歷的時間，使其以平滑漸變的方式發生改變，產生動畫效果。有4個參數。 * 第一個參數：指定對哪個HTML元素進行處理。 * 第二個參數：定義持續時間。 * 第三個參數：指定漸變的速度。（有多個可用的屬性值，請完成自學） * 第四個參數：指定延遲時間。 ```html <style> div { width:100px; height:100px; background:red; transition:width 2s; } div:hover { width:300px; } </style> <body> <div></div> </body> ``` > 如果想設置多個屬性的漸變動畫，使用逗號分隔。 ~~~ transition: width,height 1s,1s ease,ease; ~~~ > 并不是所有的CSS屬性都支持漸變動畫。 [支持動畫的CSS屬性](https://www.cnblogs.com/yunkou/p/4235469.html) ### 2.Animation動畫 `annimation`動畫提供了更靈活的制作動畫的方法。`animation`是一個符合屬性，有5個參數： * 第一個參數：指定動畫的名稱。 * 第二個參數：指定動畫的持續時間。 * 第三個參數：指定動畫的變化速度。 * 第四個參數：指定動畫延遲多久開始執行。 * 第五個參數：指定動畫循環執行的次數。 ```html <style> div { width:100px; height:100px; background:red; animation:myfirst 5s; } @keyframes myfirst { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } </style> <body> <div></div> </body> ```