Animering av html-element

Här är några exempel på transition, transform och keyframes.
Jag valde att bara arbeta med bilder eftersom det låter mig behålla katt-temat.

Exempel 1: Katter som snurrar

Knappen kör en javascript-funktion som justerar bildens style.transform attribut.
Eftersom bilden ska snurra används transform:rotate(xx deg)
Rörelsen tar 0.5 sekunder p.g.a bildens transition-regel.

Katter som snurrar

Exempel 2: Katt som kikar fram

Bilden på katten ligger bakom knappen i z-index. Knappen lägger till en "show" css-klass på elementet.
Detta utlöser en transform: translateX(100%); så bilden rör sig sin hela bredd åt höger.
Behållaren får även overflow:visible; så kattens öron inte klipps av.
Rörelsen tar 0.5 sekunder p.g.a bildens transition-regel.
Efter 2 sekunder tas "show" bort, katten glider tillbaka och overflow är hidden igen.

Katt som kikar

Exempel 3: Katt som springer

Här används olika keyframes-regler och spritesheets för att flytta katt-elementet och dess bakgrundsbild.
Javascript används för att byta css-klasser på kattens element när knappen trycks.
Två keyframes-regler används för att flytta bakgrundsbilden till rätt plats, så animeringen byter bild, beroende på om katten väntar eller springer. En tredje keyframes-regel flyttar katt-elementet åt höger inom behållaren.
Animeringen tar 4 sekunder oavsett skärmstorlek och behållarens bredd är dynamisk med flex-grow.
Skillnad i elementets bredd leder till att det ser ut som att katten springer snabbare på större skärmar.

Exempel 4: Tidigare användning

På sidan "Lab 3" använde jag transform för att öka skalan på bildena när de klickas eller vid hover.