Transition-ominaisuus

Ominaisuus transition on lyhenne sulaville siirtymille, sen avulla voidaan samanaikaisesti asettaa transition-duration, transition-property, transition-timing-function ja transition-delay.

Syntaksi

cssvalitsin {
  transition: arvo;
}

Ominaisuuksien järjestyksellä ei ole merkitystä, kuitenkin suoritusaika (transition-duration) tulee olla ennen viivettä (transition-delay).

Arvot

Katso vastaavat ominaisuudet. Oletusarvo: all 0s ease 0s.

Arvo none peruu kaikki siirtymät (ne tapahtuvat välittömästi).

Esimerkki

Vie hiiri elementin päälle - 3 sekuntia ei tapahdu mitään (viive on 3s), ja sitten se muuttaa sulavasti leveyttään 2 sekunnissa. Jos sitten poistat hiiren - taas 3 sekuntia ei tapahdu mitään, ja sitten leveys pienenee sulavasti takaisin alkuperäiseen arvoonsa:

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

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

Результат:

Katso myös