HTMLcssJAVA.com

animation:

De CSS property animation maakt het mogelijk om verschillende animaties te maken met CSS. Met deze property kunnen verschillende animatie-instellingen worden opgegeven, zoals de animatieduur, de achtergrondkleur en de afspeelsnelheid. De animatie wordt afgespeeld door de browser, waardoor het mogelijk is om complexe animaties te maken met CSS.

Voorbeelden:

• animation: naam 4s linear 1s infinite alternate;
• animation: naam 0.5s ease-in-out 0s 1;
• animation: naam 0.5s ease-in-out 0s 2 alternate;

Toepassing:

<DIV style="animation: naam 0.5s ease-in-out 0s 2 alternate;"> Voorbeeldtekst </DIV>

animation-delay:

De css property animation-delay bepaalt hoe lang het duurt voordat een animatie begint nadat deze is opgeroepen door de pagina. Hierdoor is het mogelijk om animaties op verschillende momenten af te laten spelen, waardoor bijvoorbeeld een bepaalde volgorde in de animaties bewaard blijft.

Voorbeelden:

• animation-delay: 5ms;
• animation-delay: 1.5s;

Toepassing:

<DIV style="animation-delay: 1.5s;"> Voorbeeldtekst </DIV>

animation-direction:

De animation-direction property geeft aan in welke richting een animatie wordt afgespeeld. De animatie kan worden afgespeeld vanaf de begin- of eindpositie of in een cirkelvormige beweging.

Voorbeelden:

• animation-direction: normal;
• animation-direction: alternate;
• animation-direction: reverse;
• animation-direction: alternate-reverse;

Toepassing:

<DIV style="animation-direction: alternate-reverse;"> Voorbeeldtekst </DIV>

animation-duration:

De animation-duration property geeft de lengte van de animatie aan. Het is de tijd in seconden of milliseconden die de animatie duurt om van begin naar eind te gaan.

Voorbeelden:

• animation-duration: 0.5s;
• animation-duration: 2ms;

Toepassing:

<DIV style="animation-duration: 2ms;"> Voorbeeldtekst </DIV>

animation-fill-mode:

De animation-fill-mode property bepaalt hoe de animatie aan het einde van de animatie wordt gevuld. Dit betekent dat de animatie de waarde aanneemt die is gedefinieerd in de laatste keyframe, zodat het object niet terugkeert naar zijn oorspronkelijke staat.

Voorbeelden:

• animation-fill-mode: none;
• animation-fill-mode: forwards;
• animation-fill-mode: backwards;
• animation-fill-mode: both;

Toepassing:

<DIV style="animation-fill-mode: both;"> Voorbeeldtekst </DIV>

animation-iteration-count:

De animation-iteration-count property specificeert hoeveel keer een animatie herhaald moet worden. Als er een oneindig aantal herhalingen nodig zijn, kan de waarde 'infinite' worden gebruikt.

Voorbeelden:

• animation-iteration-count: infinite;

Toepassing:

<DIV style="animation-iteration-count: infinite;"> Voorbeeldtekst </DIV>

animation-name:

De animation-name property specificeert de naam van de animatie die wordt gebruikt. Dit is een verplicht eigenschap als er meerdere animaties zijn gespecificeerd in de animation-name lijst. De naam van de animatie wordt gebruikt om de verschillende animaties te verwijzen naar de keyframes die de animatie definiëren.

Voorbeelden:

• animation-name: animation1;
• animation-name: animation2;
• animation-name: animation3;

Toepassing:

<DIV style="animation-name: animation3;"> Voorbeeldtekst </DIV>

animation-play-state:

De property animation-play-state regelt of een animatie wordt afgespeeld of niet. Het is mogelijk om een animatie op een bepaalde plek te pauzeren en later weer te starten. Door deze property te gebruiken kun je de animatie beter sturen.

Voorbeelden:

• animation-play-state: play;
• animation-play-state: pause;

Toepassing:

<DIV style="animation-play-state: pause;"> Voorbeeldtekst </DIV>

animation-timing-function:

De animation-timing-function property specificieert hoe snel de animatie elke keyframe uitvoert. Het bepaalt de verhouding tussen de tijden van de verschillende keyframes, dus hoe snel de animatie tussen keyframes verloopt.

Voorbeelden:

• animation-timing-function: linear;
• animation-timing-function: ease;
• animation-timing-function: ease-in;
• animation-timing-function: ease-out;
• animation-timing-function: ease-in-out;
• animation-timing-function: cubic-bezier(n,n,n,n);

Toepassing:

<DIV style="animation-timing-function: cubic-bezier(n,n,n,n);"> Voorbeeldtekst </DIV>