CSS oorgang-eiendom eiendom
Voorbeeld
Beweeg oor 'n <div>-element en verander die breedte met 'n gladde oorgangseffek:
div
{
transition-property: width;
}
div:hover {
width: 300px;
}
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die transition-property
eiendom spesifiseer die naam van die CSS-eienskap waarvoor die oorgangseffek is (die oorgangseffek sal begin wanneer die gespesifiseerde CSS-eienskap verander).
Wenk: 'n Oorgangseffek kan tipies voorkom wanneer 'n gebruiker oor 'n element beweeg.
Let wel: Spesifiseer altyd die oorgang-duur- eienskap, anders is die duur 0, en die oorgang sal geen effek hê nie.
Standaard waarde: | almal |
---|---|
Geërf: | geen |
Animateerbaar: | geen. Lees oor animeerbaar |
Weergawe: | CSS3 |
JavaScript-sintaksis: | voorwerp .style.transitionProperty="width,height" |
Blaaierondersteuning
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-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
CSS-sintaksis
transition-property: none|all|property|initial|inherit;
Eiendomswaardes
Value | Description |
---|---|
none | No property will get a transition effect |
all | Default value. All properties will get a transition effect |
property | Defines a comma separated list of CSS property names the transition effect is for |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Meer voorbeelde
Voorbeeld
Beweeg oor 'n <div>-element en verander die breedte EN hoogte met 'n gladde oorgangseffek:
div {
transition-property: width, height;
}
div:hover {
width: 300px;
height: 300px;
}
Verwante bladsye
CSS-tutoriaal: CSS-oorgange
HTML DOM verwysing: transitionProperty eiendom