• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS3 Transition</title>
7
    <style>
8
        #resize {
9
            background-color: orange;
10
            height: 100px;
11
            width: 150px;
12
            margin: 10px;
13
            -webkit-transition: width 1s, height 2s;
14
            transition: width 1s, height 2s;
15
            -webkit-transition-delay: 1s;
16
            transition-delay: 1s;
17
        }
18
        #resize:hover {
19
            width: 300px;
20
            height: 300px;
21
        }
22
    </style>
23
</head>
24
​
25
<body>
26
​
27
    <h1>전환(transition)의 지연</h1>
28
    <div id="resize">마우스를 올려놓고 1초가 지나야 전환(transition) 효과가 동작합니다.</div>
29
    <p>사각형 위로 마우스를 올려놔 보세요!!</p>
30
​
31
</body>
32
​
33
</html>