learn-htmlandcss/12_2AnimationBasic.html at main · Hanjun2022/learn-htmlandcss · GitHub

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation Basic</title>
    <style>
        .shape{
            margin:0 auto;
            margin-top:80px;
            width:100px;
            height:100px;
            background-color: red;
        }
        .animation1{
            animation-name:shape-color;
            animation-duration:3s;
            animation-iteration-count: 3;
        }
        .animation2{
           /*
           animation-name:circle;
            animation-duration:1s;
            animation-iteration-count: 3; 밑에로 축약해서 쓸 수가있다.
            */
            animation: circle 2s infinite;
        }
        /*@keyframes animation-name 지정
          animation-name:shape-color;   ---
          animation-duration:3s;        ---
          animation-iteration-count: 3; ---애니메이션이 몇 번 반복되는지 지정함 :infinate로 무한히 반복

         작업 진행 상황에 따라 색깔도 다르게 바뀐다.
          */
        @keyframes shape-color{
            from{
                background-color:red;
            }
            50%{
                background-color:yellow;
            }
            70%{
                background-color: green;
            }
            to{
                background-color:blue;
            }
        }
        @keyframes circle{
            0%{
                border-radius:0;
            }
            50%{
                border-radius:50%;
            }
            100%{
                border-radius:0;
            }
        }

    </style>
</head>
<body>
    <main class="container">
        <div class="shape animation1"></div>
        <div class="shape animation2"></div>
    </main>
</body>
</html>