• 코드:
​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
            background-color: orange;
10
            height: 50px;
11
            width: 100px;
12
            margin: 10px;
13
            position: relative;
14
            text-align: center;
15
            line-height: 50px;
16
            -webkit-animation: timingFunc 3s;
17
            animation: timingFunc 3s;
18
        }
19
        #div_01 {
20
            -webkit-animation-timing-function: linear;
21
            animation-timing-function: linear;
22
        }
23
        #div_02 {
24
            -webkit-animation-timing-function: ease;
25
            animation-timing-function: ease;
26
        }
27
        #div_03 {
28
            -webkit-animation-timing-function: ease-in;
29
            animation-timing-function: ease-in;
30
        }
31
        #div_04 {
32
            -webkit-animation-timing-function: ease-out;
33
            animation-timing-function: ease-out;
34
        }
35
        #div_05 {
36
            -webkit-animation-timing-function: ease-in-out;
37
            animation-timing-function: ease-in-out;
38
        }
39
        @-webkit-keyframes timingFunc {
40
            from { left: 0px; }
41
            to { left: 300px; }
42
        }
43
        @keyframes timingFunc {
44
            from { left: 0px; }
45
            to { left: 300px; }
46
        }
47
    </style>
48
</head>
49
​
50
<body>
51
​
52
    <h1>애니메이션 효과의 속도 변화</h1>
53
​
54
    <div id="div_01">linear</div>
55
    <div id="div_02">ease</div>
56
    <div id="div_03">ease-in</div>
57
    <div id="div_04">ease-out</div>
58
    <div id="div_05">ease-in-out</div>
59
​
60
</body>
61
​
62
</html>