CSS3 animationer

af | 13. september, 2016

CSS animationer bruges til at animere og gradvist ændre udseendet på HTML-elementer, uden brug af eksterne sprog som f.eks. Javascript eller Flash. Hvis du har forudgående erfaring med CSS, vil denne guide være forholdsvis simpel og nem at gå til.

Specificér og navngiv din animation

Du skal fra start af specificere hvilke egenskaber på dit html-element der skal ændres. Hertil skal vi have oprettet nogle keyframes. Dine forskellige keyframes bestemmer hvilke ændringer der skal ske på elementet, og hvornår i animationen de skal foretages. Derudover skal animationen have et navn, og der skal angives hvor lang tid animationen skal bruge inden den er kørt helt igennem. Det gøres som vist herunder:


@keyframes eksempel {
    0% { background: red; }
    100% { background: green; }
}

div {
    width: 50px;
    height: 50px;
    background: red;
    animation-name: eksempel;
    animation-duration: 3000ms;
}

Se eksempel på CodePen

I eksemplet herover er keyframes på eksempel-animationen sat til gradvist at skulle ændre baggrundsfarven fra rød til grøn. Derudover er div-boksen sat til at skulle køre eksempel-animationen.

Yderligere modifikationer

Udover at specificere hvor lang tid animationen skal tage at køre, er der forskellige andre faktorer man kan justere:

Animation-timing-function
Bestemmer fart-kurven på animationen.

Animation-delay
Bestemmer hvor lang tid der skal gå, før animationen starter.

Animation-iteration-count
Bestemmer hvor mange gange animationen skal køre, før den står stille.

Animation-direction
Bruges til at omvende retningen på animationen, så den f.eks. i stedet går fra 100% til 0%.

div {
    animation-name: eksempel;
    animation-duration: 3000ms;
    animation-timing-function: ease-in-out;
    animation-delay: 2000ms;
    animation-iteration-count: infinite;
    animation-direction: normal;
}

Se eksempel på CodePen

Forkortelse (short-hand)

Eksemplet fra forrige afsnit kan forkortes og opnås med en linje CSS i stedet. Det gøres således:

div {
    animation: eksempel 3000ms ease-in-out 2000ms infinite normal;
}

Se eksempel på CodePen

Browser-understøttelse

Alle nyere browsere understøtter CSS-animationer, og det er derfor sikkert for dig at bruge dem i dine web-projekter. De forskellige browsere har forskellige prefixes, som du lige skal have med i din .css-fil, før du smider den online.

@keyframes eksempel {
    0% { background: red; }
    100% { background: green; }
}

@-webkit-keyframes eksempel {
    0% { background: red; }
    100% { background: green; }
}

@-moz-keyframes eksempel {
    0% { background: red; }
    100% { background: green; }
}

@-o-keyframes eksempel {
    0% { background: red; }
    100% { background: green; }
}

div {
    animation: eksempel 3000ms ease-in-out 2000ms infinite normal;
    -webkit-animation: eksempel 3000ms ease-in-out 2000ms infinite normal;
    -moz-animation: eksempel 3000ms ease-in-out 2000ms infinite normal;
    -o-animation: eksempel 3000ms ease-in-out 2000ms infinite normal;
}

Se eksempel på CodePen

For en mere detaljeret guide, samt hjælp til hvilke værdier der er mulige at bruge til de forskellige egenskaber, kan du besøge dette link: W3Schools om CSS-animationer

Skal vi også hjælpe dig?

Hver måned hjælper vi 1-5 virksomheder med at øge salget. Skal din være den næste?

Jakob Bank

Jakob Bank
Stifter, ejer
+45 4242 1882
jb@offpiste.io

Jakob Bank

Jakob Bank
Stifter, ejer
+45 4242 1882
jb@offpiste.io