I min hverdag dumper jeg ofte borti ting som er interessante, noen ting tester jeg ut med en gang, andre ting blir liggende på blokka i det uendelige fordi tiden ikke strekker til (eller det blir ikke prioritert). Mimic.css er et eksempel på dette.
Dette er et bibliotek for CSS animasjon (lite og enkelt), som jeg kom over for en tid tilbake, men ikke har prioritert å teste ut før nå. CSS animasjon, avhengig av hva du skal gjøre, kan bli ganske komplisert, og krever at du har en grunnleggende forståelse av CSS før du setter igang. Ofte er det kanskje snakk om relativ enkel animasjon, men det krever allikevel litt jobb å få til det du ønsker. I slike situasjoner kan et bibliotek som f.eks mimic.css være gull verdt.
Det finnes en mengde biblioteker og rammeverk der ute som gjør jobben med å produsere animasjon enklere. Dette er på ingen måte en sammenligning av disse, ei heller en anbefaling av et bestemt bibliotek, snarere et tips om et bibliotek for CSS animasjon som er enkelt å ta i bruk og som kanskje løser en del enkle animasjonsoppgaver du måtte ha.
Hvordan fungerer det?
- Last ned filene fra GitHub (Obs! vi tar ikke ansvar for eksterne linker).
- Inkluder de på siden din
<head> <link rel="stylesheet" href="mimic.css"> </head>
- For å animere et element, legg til class animated og ønsket animasjon, f.eks:
<div class="animated heartBeat">Se, jeg er animert</div>
Det er kanskje ikke veldig avansert (biblioteket inneholder 20 ulike animasjoner), men for en del enklere oppgaver hvor du ønsker animasjon/effekter så dekker det potensielt ganske mange situasjoner.
Du finner noen enkle eksempler på animasjon med CSS her.
Vil du lære mer om animasjon?
Vi tilbyr en rekke kurs innen animasjon, enten det dreier seg om CSS, HTML5, animert GIF, SVG osv.