金魚都能懂的網頁設計入門-動畫 animation需要搭配 @keyframes

發表於 更新於 分類於 閱讀次數：
金魚都能懂的網頁設計入門-第十八天 - Animation 網頁動畫 需要搭配 @keyframes

Animation 網頁動畫

多數會搭程式來運用
原理: 動畫 animation需要搭配 @keyframes
animation: 是要在那個角色去執行動畫
@keyframes 動畫內容說明：
想像有一個動畫，在一個連續的時間軸上面在進行著，假如用時間來看 ，有一個圓型在 0秒時是圓型的，在10秒鐘時是方型的，中間它會自動補上動畫。
以下範例，@keyframes就是角本，box 就是演員，
然後選擇角本由那個演肙來詮釋：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>金魚都能懂的網頁設計入門-第十八天 - Animation 網頁動畫</title>
    <style>
        /* @keyframes 是角本(劇本),
        box 是演員，
        所以角本可以決定給 .box 或 .box1來演  */
        .box{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: #f00;
        }
        .box1{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: #f00;
            /* animation: 動畫名稱 播放時間 延遲執行的時間 速度 次數 方向 填充模式 播放狀態 */
            /* 2秒後執行 */
             animation: lily 2s 2s; 

        }
        /* @keyframes 動晝名稱 */
        @keyframes lily{
            0%{ border-radius: 50%;}
            100%{ border-radius: 0%;}
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
</body>
</html>

/* 2秒後執行 ，結果如下: */

1
2
/* 執行2次 */
animation: lily 2s 2;

/* 執行2次 ,結果如下*/

1
2
/* 執行5次,方向來回播放 */
            animation: lily 2s 5 alternate;

/* 方向來回播放 */

1
2
/* 方向來回播放,速度0.5 , infinite不斷播放 ,可以用在小小的 icon*/
            animation: lily .5s infinite alternate;

/* 方向來回播放,速度0.5 , infinite不斷播放 ,可以用在小小的 icon*/

文獻連結:
金魚都能懂的網頁設計入門-第十八天 - 網頁動畫
https://www.youtube.com/watch?v=H9xZ9mExrZk&list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre&index=18 by CSScoke Amos

完整版30集 - 金魚都能懂網頁設計入門
https://www.youtube.com/playlist?list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre by CSScoke Amos