CSS Animation

CSS som språk har utviklet seg voldsomt de siste årene og blant alt det nye finner vi CSS animations.

Lenge var det for dårlig støtte for CSS-animasjoner i nettleserne, men nå begynner dette å endre seg.

Alle moderne nettlesere i dag har støtte for CSS3-animasjoner og det er et reelt alternativ til andre metoder i mange sammenhenger.

Hvorfor bruke CSS til animasjon?

• Krever ingen plugins.
• Fungerer på tvers av moderne nettlesere.
• Du kan nyttiggjøre deg språk du allerede kan, CSS, og slipper å lære et nytt språk eller et nytt verktøy.
• Lette filer.
• Det er enkelt å animere elementer på nettsiden, istedenfor å lage separate animasjoner som du setter inn på siden (ala Flash).
• Gjort riktig har vi en naturlig fallback i form av statiske elementer.

Sjekk ut vårt 1-dags kurs i CSS-animasjon.

Kodeeksempel:

@keyframes scale-up {
0% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
25% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
60% {
-webkit-transform: scale(.9);
transform: scale(.9);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}