• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS3 Animation</title>
7
    <style>
8
        p {
9
            height: 40px;
10
            width: 400px;
11
            border: solid 5px red;
12
            -webkit-animation-name: movingPara;
13
            -webkit-animation-duration: 4s;
14
            animation-name: movingPara;
15
            animation-duration: 4s;
16
        }
17
        @-webkit-keyframes movingPara {
18
            0% { border-color: red; }
19
            20% { border-color: orange; }
20
            40% { border-color: yellow; }
21
            50% { border-color: green; }
22
            60% { border-color: blue; }
23
            80% { border-color: navy; }
24
            100% { border-color: purple; }
25
        }
26
        @keyframes movingPara {
27
            0% { border-color: red; }
28
            20% { border-color: orange; }
29
            40% { border-color: yellow; }
30
            50% { border-color: green; }
31
            60% { border-color: blue; }
32
            80% { border-color: navy; }
33
            100% { border-color: purple; }
34
        }
35
    </style>
36
</head>
37
​
38
<body>
39
​
40
    <h1>@keyframes 규칙을 이용한 애니메이션 효과</h1>
41
    <p>다양한 애니메이션 효과를 간단하게 줄 수 있어요!</p>
42
​
43
</body>
44
​
45
</html>