Sifat transition-delay

Sifat transition-delay menetapkan kelewatan sebelum memulakan peralihan lancar transition.

Sintaks

csspemilih {
  transition-delay: masa dalam s atau ms;
}

Nilai

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:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#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