• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS3 Animation</title>
7
    <style>
8
        div {
9
            height: 150px;
10
            width: 150px;
11
            margin: 20px;
12
            background-color: orange;
13
            border-radius: 150px;
14
            line-height: 150px;
15
            text-align: center;
16
            -webkit-animation-name: movingPara;
17
            -webkit-animation-duration: 2s;
18
            -webkit-animation-iteration-count: 4;
19
            animation-name: movingPara;
20
            animation-duration: 2s;
21
            animation-iteration-count: 4;
22
        }
23
        @-webkit-keyframes movingPara {
24
            from { transform: rotate(-45deg); }
25
            to { transform: rotate(45deg); }
26
        }
27
        @keyframes movingPara {
28
            from { transform: rotate(-45deg); }
29
            to { transform: rotate(45deg); }
30
        }
31
        #alter {
32
            -webkit-animation-direction: alternate;
33
            animation-direction: alternate;
34
        }
35
    </style>
36
</head>
37
​
38
<body>
39
​
40
    <h1>animation-direction 속성값 - alternate</h1>
41
    <div id="forward">오른쪽으로 도는 원</div>
42
    <div id="alter">오뚜기같은 원</div>
43
​
44
</body>
45
​
46
</html>