transition-timing-function css3

10  16  26  12.1

Siden er opdateret 7. 8. 2013

Med transition-timing-function kan man definere lineariteten i ændringens hastighed. Følgende muligheder kan defineres:

linear
ændringen sker med samme hastighed fra start til slut
ease
ændringen vil starte blødt op, sætte farten op og så slutte blødt
ease-in
ændringen vil starte blødt op og så sætte farten op
ease-out
ændringen vil starte hurtigt op og så slutte blødt
ease-in-out
ændringen vil starte blødt op, sætte farten op og så slutte blødt
div#demo {
width:80px;
height:80px;
border: 1px solid #ccf;
transition-property: width;
transition-duration: 10s;
transition-timing-function: ease-in-out;
}

div#demo:hover {
width:400px;
}

vil se sådan ud (hold musemarkøren over firkanten med den lyseblå ramme):

Noget tekst
Valid XHTML og CSS / Copyright © Erik Ginnerskov august 2013
Hjemmesideskolen
Du er her: Forsiden - css - egenskaber - transition-timing-function
sidens top
Brugere lige nu: 1
Home Mail