• 코드:
​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 3px orange;
12
            -webkit-animation-name: movingPara;
13
            -webkit-animation-duration: 3s;
14
            animation-name: movingPara;
15
            animation-duration: 3s;
16
        }
17
        @-webkit-keyframes movingPara {
18
            from { margin-left: 100%; }
19
            to { margin-left: 0%; }
20
        }
21
        @keyframes movingPara {
22
            from { margin-left: 100%; }
23
            to { margin-left: 0%; }
24
        }
25
    </style>
26
</head>
27
​
28
<body>
29
​
30
    <h1>@keyframes 규칙을 이용한 애니메이션 효과</h1>
31
    <p>다양한 애니메이션 효과를 간단하게 줄 수 있어요!</p>
32
​
33
</body>
34
​
35
</html>