CSS oorgang Eiendom

Beweeg oor 'n <div>-element om die breedte geleidelik van 100px na 300px te verander:

div {
  width: 100px;
  transition: width 2s;
}

div:hover {
  width: 300px;
}

Meer "Probeer dit self" voorbeelde hieronder.

Definisie en gebruik

Die transitioneiendom is 'n snelskrif eiendom vir:

Let wel: Spesifiseer altyd die oorgang-duur- eienskap, anders is die duur 0'e, en die oorgang sal geen effek hê nie.

Standaard waarde:	alle 0'e vergemaklik 0'e
Geërf:	geen
Animateerbaar:	geen. Lees oor animeerbaar
Weergawe:	CSS3
JavaScript-sintaksis:	voorwerp .style.transition="all 2s"

Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.

Nommers gevolg deur -webkit-, -moz- of -o- spesifiseer die eerste weergawe wat met 'n voorvoegsel gewerk het.

Property
transition	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

transition: property duration timing-function delay|initial|inherit;

Value	Description
transition-property	Specifies the name of the CSS property the transition effect is for
transition-duration	Specifies how many seconds or milliseconds the transition effect takes to complete
transition-timing-function	Specifies the speed curve of the transition effect
transition-delay	Defines when the transition effect will start
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Wanneer 'n <input type="text"> fokus kry, verander die breedte geleidelik van 100px na 250px:

input[type=text] {
width: 100px;
transition: width .35s ease-in-out;
}

input[type=text]:focus {
width: 250px;
}

CSS-tutoriaal: CSS-oorgange

HTML DOM verwysing: oorgang eiendom