Sifat transition-property

Sifat transition-property menetapkan sifat yang akan dianimasikan dengan peralihan lancar transition. Nilai yang harus diberikan ialah nama sifat CSS yang akan dianimasikan. Jika nilai all diberikan (ia ditetapkan secara lalai) - semua sifat akan dianimasikan sekaligus.

Sintaks

cssselector {
  transition-property: nilai;
}

Contoh

Letakkan kursor tetikus di atas blok - ia akan mengubah lebarnya secara lancar, kerana transition-property mempunyai nilai width:

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

css#elem {
  border: 1px solid black;
  transition-duration: 2s;
  transition-property: width;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

Contoh . Nilai all

Dalam contoh ini transition-property mempunyai nilai all - oleh itu semua sifat yang ditulis untuk keadaan hover akan berubah secara lancar (dalam kes kami ini ialah width dan height). Semua perubahan akan berlaku dalam masa yang sama, yang ditetapkan dalam transition-duration:

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

css#elem {
  border: 1px solid black;
  transition-duration: 2s;
  transition-property: all;
  height: 25px;
  width: 100px;
}
#elem:hover {
  height: 50px;
  width: 400px;
}

Результат:

Lihat juga