Eienskap transition

Die eienskap transition is 'n afkorting vir sagte oorgange, dit laat jou toe om gelyktydig transition-duration, transition-property, transition-timing-function en transition-delay te spesifiseer.

Sintaksis

cssselektor {
  transition: waarde;
}

Die volgorde van die eienskappe maak nie saak nie, maar die uitvoeringstyd (transition-duration) moet voor die vertraging (transition-delay) wees.

Waardes

Sien die ooreenstemmende eienskappe. Standaardwaarde: all 0s ease 0s.

Die waarde none kanselleer alle oorgange (hulle sal oombliklik plaasvind).

Voorbeeld

Beweeg jou muis oor die blok - vir 3 sekondes sal niks gebeur nie (daar is 'n vertraging van 3s), en dan sal dit geleidelik sy breedte verander oor 2 sekondes. As jy dan die muis wegneem - sal weer vir 3 sekondes niks gebeur nie, en dan sal die breedte geleidelijk verminder na die oorspronklike waarde:

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

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

Результат:

Sien ook