• 코드:
​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
        }
17
        @-webkit-keyframes myShorthand {
18
            from { transform: rotate(-45deg); }
19
            to { transform: rotate(45deg); }
20
        }
21
        @keyframes myShorthand {
22
            from { transform: rotate(-45deg); }
23
            to { transform: rotate(45deg); }
24
        }
25
        #long {
26
            -webkit-animation-name: myShorthand;
27
            -webkit-animation-duration: 3s;
28
            -webkit-animation-timing-function: ease-in-out;
29
            -webkit-animation-delay: 1s;
30
            -webkit-animation-iteration-count: 3;
31
            -webkit-animation-direction: reverse;
32
            animation-name: myShorthand;
33
            animation-duration: 3s;
34
            animation-timing-function: ease-in-out;
35
            animation-delay: 1s;
36
            animation-iteration-count: 3;
37
            animation-direction: reverse;
38
        }
39
        #short {
40
            -webkit-animation: myShorthand 3s ease-in-out 1s 3 reverse;
41
            animation: myShorthand 3s ease-in-out 1s 3 reverse;
42
        }
43
    </style>
44
</head>
45
​
46
<body>
47
​
48
    <h1>animation 속성을 이용한 축약 표현</h1>
49
    <div id="long">6개의 속성</div>
50
    <div id="short">animation 속성</div>
51
​
52
</body>
53
​
54
</html>