Over transitions
Deze bladzijde gaat over transitions. Daarmee laat je de eigenschappen van een element "glad" in elkaar overlopen, in een bepaalde tijdsduur.
In CSS bestaan twee methodes om elementen van een document te laten bewegen: animation en transition.
Bij animation denk je aan beweging die behoorlijk complex kan zijn. De beweging verloopt van een beginstand naar een eindstand, met eventueel een aantal tussenstappen. Meer over die aanpak lees je in het item Over @keyframes.
Bij een transition is de beweging gewoonlijk beperkt. Er is –net als bij animation– een duidelijke begin- en
eindstand, echter zonder tussenstappen.
Het effect kan heel subtiel zijn. Transitions worden daarom veel toegepast als reactie op een mouseover, mouseout of mouseclick.
Voorbeelden van dergelijke transitions vind je in de items Geanimeerde button rollover met CSS I,
II, III en IV.
Ten overvloede nog een voorbeeldje. Als je met de muis over het rode rechthoekje hier rechts gaat, verandert dat in een
klap van kleur. Als je met de muis over het groene rechthoekje gaat, vloeit de kleur over in rood. Dat is het verschil tussen
geen transition en wel een transition.
Aanraakscherm: even vasthouden.
De CSS-code van het rode vierkantje is:
.vb2 { width:40px; height:60px; border:1px solid black;
background-color:#fcc; display:inline-block }
.vb2:hover { background-color:teal }
De CSS-code van het groene vierkantje is:
.vb1 { width:40px; height:60px; border:1px solid black;
background-color:teal; display:inline-block;
transition-property: background-color;
transition-duration: 3s;
transition-timing-function: ease-in-out }
.vb1:hover { background-color:#fcc }
Opmerking: Dit voorbeeld werkt niet op aanraakschermen, omdat hover daar niet is gedefinieerd.
Een overzicht van de mogelijkheden van transition vind je in onderstaande lijst.
| Naam | Betekenis | |
| transition-property | Hiermee specificeer je de naam van
de CSS-eigenschap waar het effect op werkt, bijvoorbeeld width, of color. Default: all. |
|
| transition-duration | Hiermee geef je aan hoeveel tijd
nodig is om het effect helemaal uit te laten lopen, in seconden [s] of millseconden [ms]. Default 0. |
|
| transition-timing-function | Dit definieert het snelheidsverloop
van het effect. Default: ease. Andere mogelijkheden zijn: • linear. De snelheid is constant over de looptijd van de animatie. • ease. De animatie start langzaam, gaat daarna snel en eindigt langzaam. • ease-in. De animatie start langzaam, gaat daarna snel en eindigt snel. • ease-out. De animatie start snel en eindigt langzaam. • ease-in-out. De animatie start langzaam, gaat daarna snel en eindigt langzaam. • step-start. Gelijkwaardig aan steps(1,start). • step-end. Gelijkwaardig aan steps(1,end). • steps(x,key). Specificeert het aantal stappen x in de animatie. De parameter x is een geheel getal ≥ 0. De parameter key is start of end. Het specificeert of de eigenschappen worden aangepast aan het begin of het einde van elke stap. Deze parameter is optioneel. Als key wordt weggelaten wordt end gebruikt. • cubic-bezier(n,n,n,n). Hiermee stel je de punten P1 en P2 in, van een derdegraads Bézierkrommme. De animatie wordt uitgevoerd volgens die kromme. Zie ook het item Bezier-krommen gebruiken in CSS-animaties. Je geeft vier parameters op. Dit zijn elk getallen 0 ≤ n ≤ 1. Er is geen default voor n. Als je dit niet opgeeft wordt een van de keywords hierboven gebruikt; als je die ook niet opgeeft wordt ease gebruikt. N.B.: De keywords met ease er in zijn voorgedefinieerde Bézierkrommmen. |
|
| transition-delay | Hiermee geef je aan hoeveel tijd
er verstrijkt voordat het effect begint, in seconden [s] of millseconden [ms]. Default 0. |
Er bestaat ook een verkorte versie van transition, waarin je de achtereenvolgende deel-eigenschappen (in deze volgorde) opsomt:
transition: property duration timing-function delay;. Default: all 0 ease 0.
Recente releases van alle grote browsers ondersteunen transitions volledig, behalve gradient. Verwacht wordt dat die eigenschap uit de specificatie gaat verdwijnen.
