CSS3 전환 전환 기간 속성

CSS3의 전환 기간 속성에 대한 자세한 설명:
이 속성은 애니메이션 전환 기간을 설정하는 데 사용됩니다. 자세한 내용은 "CSS3의 전환 속성에 대한 자세한 설명" 장을 참조하세요.
문법 구조:

transition-duration：<time>[ ,<time> ]*

매개변수 분석:
<time>: 전환 효과의 시간을 설정합니다.
특별 참고 사항:
1. 여러 속성을 설정하려면 쉼표로 구분해야 합니다. 이 시간은 전환 속성 속성에 의해 일대일로 설정된 전환 속성에 해당합니다.
2. 해당 스크립트 기능은 TransitionDuration입니다.
코드 예:
예 1:

<!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;
  -moz-transition-duration:2s;
  -webkit-transition-duration:2s;
  -o-transition-duration:2s;
}
#thediv:hover{
  width:500px;
  height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

위 코드에서는 전환 시간을 2초로 설정할 수 있는데, 이는 너비와 높이의 전환 효과가 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;
}
#thediv:hover{
  width:500px;
  height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

위 코드에서는 너비 애니메이션이 2초 이내에 완료되고 높이 애니메이션이 5초 이내에 완료되도록 설정합니다.

지속적인 학습

새로운 파일

<!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; } #thediv:hover{ width:500px; height:200px; } </style> </head> <body> <div id="thediv"></div> </body> </html>

제출하다 코드 재설정

자동운전