• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS3 Transition</title>
7
    <style>
8
        div {
9
            background-color: orange;
10
            height: 50px;
11
            width: 100px;
12
            margin: 10px;
13
            text-align: center;
14
            line-height: 50px;
15
            -webkit-transition: width 1s;
16
            transition: width 1s;
17
        }
18
        #div_01 {
19
            -webkit-transition-timing-function: linear;
20
            transition-timing-function: linear;
21
        }
22
        #div_02 {
23
            -webkit-transition-timing-function: ease;
24
            transition-timing-function: ease;
25
        }
26
        #div_03 {
27
            -webkit-transition-timing-function: ease-in;
28
            transition-timing-function: ease-in;
29
        }
30
        #div_04 {
31
            -webkit-transition-timing-function: ease-out;
32
            transition-timing-function: ease-out;
33
        }
34
        #div_05 {
35
            -webkit-transition-timing-function: ease-in-out;
36
            transition-timing-function: ease-in-out;
37
        }
38
        div:hover {
39
            width: 300px;
40
        }
41
    </style>
42
</head>
43
​
44
<body>
45
​
46
    <h1>전환(transition)의 속도 변화</h1>
47
    <div id="div_01">linear</div>
48
    <div id="div_02">ease</div>
49
    <div id="div_03">ease-in</div>
50
    <div id="div_04">ease-out</div>
51
    <div id="div_05">ease-in-out</div>
52
    <p>각 키보드 위로 마우스를 올려놔 보세요!!</p>
53
​
54
</body>
55
​
56
</html>