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
