구문:
transition-delay ： <time> [, <time>]*
Transition-delay는 애니메이션이 실행되기 시작하는 시간, 즉 요소 속성 값을 변경한 후 전환 효과 실행을 시작하는 데 걸리는 시간을 지정하는 데 사용됩니다. < ;time>은 값이며, 단위는 s(초) 또는 ms(밀리초)입니다. 이는 전환 기간과 매우 유사합니다. :before 및 :after 의사 요소에도 적용할 수 있습니다. 기본 크기는 "0"입니다. 이는 지연 없이 즉시 변환이 수행됨을 의미합니다.
때때로 하나의 CSS 효과의 속성을 변경할 뿐만 아니라 두 개 이상의 CSS 속성의 전환 효과도 변경하려는 경우에는 여러 전환 문을 함께 묶고 쉼표(",")로 구분하면 됩니다. 각각은 서로 다른 기간과 시간 비율 변환 방법을 가질 수 있습니다. 하지만 주목할 만한 점은 전환 지연과 전환 지속 시간의 값이 모두 시간이므로 시퀀스에서 위치를 구별하기 위해 브라우저는 일반적으로 시간으로 구문 분석할 수 있는 첫 번째 값을 두 번째 값으로 결정한다는 것입니다. 전환 기간은 전환 지연입니다. 예:
a { -moz-transition: background 0.5s ease-in,color 0.3s ease-out;
-webkit-transition: background 0.5s ease-in,color 0.3s ease-out;
-o-transition: background 0.5s ease-in,color 0.3s ease-out;
transition: background 0.5s ease-in,color 0.3s ease-out;
}
요소에 대해 모든 전환 효과 속성을 수행하려면 all 속성 값을 사용하여 작동할 수도 있습니다. 이때 두 요소는 다음과 같이 동일한 기간 및 속도 변환 방법을 공유합니다.
a { -moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
위 내용을 바탕으로 전환을 간략하게 설명할 수 있습니다. 전환: <duration> <delay> 다음과 같이 해당 예제 코드:
p { -webkit-transition: all .5s ease-in-out 1s;
-o-transition: all .5s ease-in-out 1s;
-moz-transition: all .5s ease-in-out 1s;
transition: all .5s ease-in-out 1s;}
코드 예:
예제 1:<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style type="text/css">
#thediv{
width:100px;
height:100px;
background:blue;
transition-property:width,height;
-moz-transition-property:width,height;
-webkit-transition-property:width,height;
-o-transition-property:width,height;
transition-duration:2s;
-moz-transition-duration:2s;
-webkit-transition-duration:2s;
-o-transition-duration:2s;
transition-delay:2s;
-moz-transition-delay:2s;
-webkit-transition-delay:2s;
-o-transition-delay:2s;
}
#thediv:hover{
width:500px;
height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>위 코드에서 마우스가 div 위에 있을 때 애니메이션 효과가 실행되기 전에 2초 동안 지연되어야 합니다.
예 2:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style>
#thediv{
width:100px;
height:100px;
background:blue;
transition-property:width,height;
-moz-transition-property:width,height;
-webkit-transition-property:width,height;
-o-transition-property:width,height;
transition-duration:2s,6s;
-moz-transition-duration:2s,6s;
-webkit-transition-duration:2s,6s;
-o-transition-duration:2s,6s;
transition-delay:2s,6s;
-moz-transition-delay:2s,6s;
-webkit-transition-delay:2s,6s;
-o-transition-delay:2s,6s;
}
#thediv:hover{
width:500px;
height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>위 코드에서 마우스를 div 위로 가져가면 너비 및 높이 애니메이션 전환 효과가 2초 지연 후 너비 및 높이 애니메이션 전환을 가리키기 시작하고 각각 6초. 다음 섹션