CSS3 Animations - Gør simple ting mere spændende

Med introduktionen af HTML5, fulgte CSS3 heldigvis med som en stor del af pakken for en webudvikler til at gøre hverdagen med at gøre web og webudvikling for webudviklere mere spændende, uanset platform. Du er helt uafhængig af at have plugins, eller javascript biblioteker såsom jquery lagt ind på din side.
To af de spændende ting som CSS3 bragte med sig var; CSS3 animations, og CSS3 transitions.

CSS3 Transitions er overgange fra en state til den næste.
Det vil sige at hvis fx at du på en hover effekt flytter et element 50px til højre, så vil din transition bestemme overgangen fra state A (startposition) til state B (50px til højre for start position).

CSS3 Animations er at du har mulighed for at lave en animation der afspilles.
Du kan opbygge en animation i punkter og så automatisk laves der "ruter" imellem dem.
Så fx hvis du har en animation med 6 punkter (0%, 20%, 40%, 60%, 80%, 100%), så vil den automatisk finde ud af hvordan den laver transitions fra state A til state B til state C osv.
Så hvis fx du i 0% har sagt at et element har opacity: 0 og i 20% har opacity: 1 så på den tid dette tager så laves en overgang fra 0 til 1.0. Hvis du så bagefter ændrer farven fra sort til rød, laves igen en automatisk overgang fra sort til rød.
Så du kan få et element til at flytte sig lidt til højre (20%), så flytte sig lidt op imens teksten ændrer sig til rød (40%), så flytte sig til venstre imens tekststørrelsen vokser (60%), og til sidst få baggrundsfarven til at skifte til en grøn baggrundsfarve (80%), for at afslutte ved at gå tilbage til sin første state (100%).
Her kan man bestemme hvor lang tid denne overgang (0-100%) skal tage, og hvordan den skal afvikles (start langsomt og afslut hurtigt, eller modsat, og mange andre muligheder.
Så kan man også sætte forskellige animationer på forskellige states - så du kunne sætte ovenstående animation på når der gås fra normal til :hover-state, og når man så går tilbage til normal så afspilles det hele igen baglæns fra en anden animation. Det giver en så ufatteligt mange muligheder.

Det er noget der gør at du nemt med lidt fodarbejde kan lave simple ting meget mere interessante ved at der er aktivitet på dine sider.

Billeder kan fade frem, elementer kan vokse når du peger på dem, tekster kan forstørres når du peger på dem, ikoner kan bevæge sig når du ser dem, menu'er kan danse når du åbner dem.
Alt sammen ting der gør en side lidt mere sjov og spændende (hvis man beherske sig), men nu heldigvis er relativt nemt fordi du har så mange muligheder og variationer der kan gøre dine sider mere spændende.

Fordi du kan bestemme flere punkter der udføres så gør det at dine muligheder er ret mange, fordi du kan få lavet så mange forskellige fede overgange så du vil tro det er løgn.

Da jeg er en meget passioneret og nysgerrig systemudvikler, så har jeg igennem noget tid rodet med både CSS3 transitions, men også med CSS3 animations, og begge er gode til hver sine ting.
Men efter jeg nu er blevet relativt god til dem, så er jeg helt vild med at gøre små bitte ting mere interessante med de muligheder CSS3 har givet mig.
Det skal ikke ligne min side er opbygget i Flash med et hav af effekter, men vil gerne have at der er lidt spil og ting der sker når man ser på min side for gør den interaktiv og dermed spændende.