Sifat transition

Sifat transition - singkatan untuk peralihan lancar, membolehkan anda menetapkan secara serentak transition-duration, transition-property, transition-timing-function dan transition-delay.

Sintaks

csspenilih {
  transition: nilai;
}

Urutan sifat nilai tidak penting, namun masa pelaksanaan (transition-duration) mesti diletakkan sebelum kelewatan (transition-delay).

Nilai

Lihat sifat yang berkaitan. Nilai asal: all 0s ease 0s.

Nilai none membatalkan semua peralihan (ia akan berlaku serta-merta).

Contoh

Letakkan 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: width 2s ease 3s;
  width: 100px;
  height: 50px;
}
#elem:hover {
  width: 400px;
}

Результат:

Lihat juga