Animatieduur en Timing Definiëren

Laten we alle mogelijke manieren bekijken om met de animatietijd te werken.

animation-duration eigenschap

animation-duration bepaalt de tijd die nodig is om een animatie één cyclus te laten voltooien (overgang van de begin- naar de eindtoestand), uitgedrukt in seconden (s) of milliseconden (ms).

animation-duration: 3s | 3000ms

Voer het volgende voorbeeld uit en beweeg met de muis over het vak:

Eigenschap animation-timing-function

animation-timing-function bepaalt hoe de animatie in de tijd verloopt en regelt de versnelling en vertraging van de animatie. De animation-timing-function kan dezelfde waarden aannemen als de eigenschap transition-timing-function. Er zijn verschillende vooraf gedefinieerde timingfuncties beschikbaar, zoals linear, ease en ease-in-out, of er kan een aangepaste cubic bezier-curve worden gedefinieerd met de functie cubic-bezier().

animation-timing-function: time_function

Pas verschillende time_functions toe op de vakken in het voorbeeld:

animation-delay eigenschap

animation-delay bepaalt de tijd die moet verstrijken voordat de animatie start. Dit kan worden opgegeven in seconden (s) of milliseconden (ms).

animation-delay: 0.1s | 100ms

Verschillende vertragingen toepassen op de vakken in het voorbeeld: