Sifat transition-delay
Sifat transition-delay menetapkan
kelewatan sebelum memulakan peralihan lancar
transition.
Sintaks
pemilih {
transition-delay: masa dalam s atau ms;
}
Nilai
| Nilai | Keterangan |
|---|---|
s |
Menetapkan masa dalam saat (contohnya 3s).
Boleh menetapkan nilai pecahan,
contohnya, 0.5s - setengah saat.
|
ms |
Menetapkan masa dalam milisaat (contohnya 3ms).
Satu saat ialah 1000 milisaat.
|
Nilai lalai: 0s.
Contoh
Letakkan kursor tetikus di atas blok - 3 saat
tiada apa-apa akan berlaku (terdapat kelewatan
3s), kemudian ia akan mengubah lebarnya secara lancar
dalam 2 saat. Jika kemudiannya mengalihkan tetikus
- sekali lagi 3 saat tiada apa-apa akan
berlaku, kemudian lebar akan berkurang secara lancar
kepada nilai asal:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition-duration: 2s;
transition-property: width;
transition-delay: 3s;
height: 50px;
width: 100px;
}
#elem:hover {
width: 400px;
}
:
Contoh
Letakkan kursor tetikus di atas blok - ia pertama kali akan mengubah
lebarnya dalam 2 saat, kemudian
akan mengubah tingginya dalam 4 saat.
Sifat-sifat akan berubah secara berurutan,
kerana untuk tinggi ditetapkan kelewatan 3
saat (masa perubahan lebar). Jika mengalihkan
tetikus - perubahan akan berlaku dalam
urutan terbalik: pertama lebar akan berkurang, kemudian
tinggi akan berkurang:
<div id="elem"></div>
#elem {
border: 1px solid black;
transition-duration: 2s, 4s;
transition-property: width, height;
transition-delay: 0s, 3s;
width: 100px;
height: 25px;
}
#elem:hover {
width: 400px;
height: 50px;
}
:
Lihat juga
-
sifat
transition-property,
yang menetapkan nama sifat untuk peralihan lancar -
sifat
transition-duration,
yang menetapkan tempoh peralihan lancar -
sifat
transition-timing-function,
yang menetapkan fungsi masa untuk peralihan lancar -
sifat
transition,
yang merupakan singkatan untuk peralihan lancar -
sifat
animation,
yang boleh digunakan untuk membuat animasi