CSS3 전환 전환 지연 속성

구문: 

 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초.

지속적인 학습

||

새로운 파일

<!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>

제출하다 코드 재설정
자동운전