Penjelasan terperinci tentang atribut tempoh peralihan CSS3:
Atribut ini digunakan untuk menetapkan tempoh peralihan animasi Untuk maklumat lanjut, sila rujuk bab "Penjelasan terperinci tentang atribut peralihan CSS3".
Struktur tatabahasa:
transition-duration：<time>[ ,<time> ]*
Analisis parameter:
<masa>: Tetapkan masa kesan peralihan.
Arahan khas:
1. Menetapkan berbilang sifat perlu dipisahkan dengan koma Kali ini sepadan dengan sifat peralihan yang ditetapkan oleh sifat peralihan.
2. Ciri skrip yang sepadan ialah transitionDuration.
Contoh kod:
Contoh 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>Kod di atas boleh menetapkan masa peralihan kepada 2 saat, yang bermaksud bahawa kesan peralihan lebar dan ketinggian selesai dalam masa 2 saat.
Contoh 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>Kod di atas menetapkan animasi lebar untuk diselesaikan dalam masa 2 saat, dan animasi ketinggian untuk diselesaikan dalam masa 5 saat.
bahagian seterusnya