Penjelasan terperinci tentang atribut peralihan SS3:
Bab ini memperkenalkan penggunaan atribut peralihan, yang juga merupakan atribut yang berkaitan dengan animasi.
1 Pengetahuan asas:
peralihan diterjemahkan ke dalam bahasa Cina bermaksud "peralihan", yang bermaksud bahawa nilai atribut css sesuatu elemen boleh diubah dalam tempoh tertentu. masa Buat peralihan yang lancar.
Atribut ini ialah atribut komposit seperti sempadan, latar belakang dan atribut lain.
Struktur sintaks:
transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]
Penjelasan parameter:
1.transition-property: Tetapkan atau dapatkan semula sifat yang mengambil bahagian dalam peralihan.
2.tempoh peralihan: Dapatkan semula atau tetapkan tempoh peralihan objek.
3.transition-timing-function: Dapatkan semula atau tetapkan jenis animasi peralihan dalam objek.
4.transition-delay: Dapatkan semula atau tetapkan masa peralihan kelewatan objek.
Contoh kod adalah seperti berikut:
<!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:width 2s;
-moz-transition:width 2s;
-webkit-transition:width 2s;
-o-transition:width 2s;
}
#thediv:hover{
width:500px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html>Kod di atas menunjukkan cara menganimasikan lebar div daripada 100px kepada 500px dalam masa dua saat.
Memandangkan ia adalah atribut komposit, adalah wajar untuk menetapkan atribut secara berasingan
bahagian seterusnya