CSS Animation generator til dovne mennesker.
CSS-animationer
CSS tillader animation af HTML-elementer uden brug af JavaScript eller Flash
I dette kapitel lærer du om følgende egenskaber:
- @keyframes
- animationsnavn
- animation-varighed
- animation-forsinkelse
- animation-iteration-tæller
- animation-retning
- animation-timing-funktion
- animation-fill-tilstand
- animation
Browserspecifikke præfikser
Nogle ældre browsere har brug for specifikke præfikser (-webkit-) for at forstå animationsegenskaberne
Hvad er CSS-animationer?
En animation lader et element gradvist ændre sig fra en stil til en anden.
Du kan ændre så mange CSS-egenskaber du vil, så mange gange du vil.
For at bruge CSS-animation skal du først angive nogle keyframes til animationen.
Keyframes indeholder, hvilke stilarter elementet vil have på bestemte tidspunkter.
@keyframes-reglen
Når du angiver CSS-stile inde i @keyframes-reglen, ændres animationen gradvist fra den nuværende stil til den nye stil på bestemte tidspunkter.
