Animatie in je css

CSS3

button{
background-color: blue;
transition-property:background-color color width; /welke property wil je veranderen? Bij meer waarden gescheiden door spatie/
transition-property:all; /*met all neem je alle properties mee */
transition-duration: 3000ms; /de duur van de animatie, het kan ook in s (seconden)/
Je kunt ook alles samenvatten in 1 property
transition: background-color 3s ease-in-out 1s; -> property – duratie – snelheid variatie – delay
de bovenstaande is in 4 seconden gereed, voor een grappig effect zou je daarna een ander effect kunnen triggeren
je kunt meerdere effecten toevoegen komma gescheiden in deze shorthand methode toevoegen
bijvoorbeeld de background en de color:
transition: background-color 3s ease-in-out 1s, color 3s ease 4s;
ook hier kun je weer voor alles kiezen, nadeel daarvan is dat je dan de stukjes niet meer op elkaar kunt afstemmen.
transition: all 3s ease-in-out 1s;
}

button:hover{
background-color:green;
color:white;
width: 100em;
}

timing functions
De timing functions hebben te maken met de variatie in snelheid van de animatie.
Bijvoorbeeld ease heeft een ritme van langzaam-snel-langzaam, linear is even snel op de gehele baan.
Hiernaast is er nog, ease-in,
transition-timing-function: ease; /Dit is standaard/
transition-delay: 2s; Stelt de animatie 2 seconden uit.

transform: translate(900px, 0); Verschuift het element 900px naar rechts.