CSS3 전환 효과 지연

이 transition-delay속성은 전환 효과의 지연을 초 단위로 지정합니다.

다음 예제는 시작하기 전에 1 초의 지연이 있습니다.

예

div {

    -webkit-transition-delay: 1s; /* Safari */

    transition-delay: 1s;

}

<!DOCTYPE html>

<html>

<head>

<style> 

div {

    width: 100px;

    height: 100px;

    background: red;

    -webkit-transition: width 3s; /* Safari */

    -webkit-transition-delay: 1s; /* Safari */

    transition: width 3s;

    transition-delay: 1s;

}

div:hover {

    width: 300px;

}

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>

</body>

</html>