torsdag den 21. august 2014

CSS3 keyframes er dejligt nemt at arbejde med

Nu er det jo heldigvis blevet meget dejligt nemt som udvikler at arbejde med grafisk frontend arbejde via CSS3.
Noget af det som CSS3 gør nemmere er at arbejde med er animationer, hvor at man bruger keyframes.
Det smarte her er at man nu som udvikler nu skal definere nogle punkter i ens animation og så vil browseren selv rendere hvordan den kommer fra forrige punkt til det næste.
Så nu kan du nemt lave en overgang fra en farve til en anden ved at lave en farve i 0% eller from, og så den anden farve i 100% eller to, og det mellemliggende vil browseren selv lave, og finde ud af hvordan den får skabt en overgang dertil. Det gør det MEGET nemmere både som C# udvikler, men også som systemudvikler.

Det samme gør sig gældende når du skal udvikle en animation med bevægelse, hvor elementer flytter sig fra punkt A til B. Du kan selv definere flere punkter den skal gå imellem, eller et start og slutpunkt.
Man kan enten lave from og to, så finder den selv ud af mellemvejen. Eller man kan også lave det i flere steps via %, som man selv bestemmer hvor langt i animationen den skal gøre dette.
Der er rigtigt mange properties man kan benytte både, font-size, width, border, border-left etc. som man kan lave nogle fine effekter ud af.

Som udvikler gør det ens arbejde MEGET nemmere at lave noget lidt mere interessant!

Der kommer et eksempel senere

Ingen kommentarer:

Send en kommentar

Kan du lide mit indlæg, har en kommentar, forslag eller andet på hjerte så skriv venligst