• 코드:
​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
            position: relative;
12
            border: solid 5px red;
13
            -webkit-animation-name: movingPara;
14
            -webkit-animation-duration: 4s;
15
            -webkit-animation-delay: 2s;
16
            animation-name: movingPara;
17
            animation-duration: 4s;
18
            animation-delay: 2s;
19
        }
20
        @-webkit-keyframes movingPara {
21
            0% { border-color: red; transform: rotateY(0deg); }
22
            20% { border-color: orange; }
23
            40% { border-color: yellow; }
24
            50% { border-color: green; transform: rotateY(180deg); }
25
            60% { border-color: blue; }
26
            80% { border-color: navy; }
27
            100% { border-color: purple; transform: rotateY(360deg); }
28
        }
29
        @keyframes movingPara {
30
            0% { border-color: red; transform: rotateY(0deg); }
31
            20% { border-color: orange; }
32
            40% { border-color: yellow; }
33
            50% { border-color: green; transform: rotateY(180deg); }
34
            60% { border-color: blue; }
35
            80% { border-color: navy; }
36
            100% { border-color: purple; transform: rotateY(360deg); }
37
        }
38
    </style>
39
</head>
40
​
41
<body>
42
​
43
    <h1>애니메이션의 지연</h1>
44
    <p>이 애니메이션 효과는 2초 뒤에 시작될 거에요!</p>
45
​
46
</body>
47
​
48
</html>