Krijg de bal aan het rollen met CSS3!

Transitions - Transformations - Animations

Welke browser kun je het best gebruiken?

Intro

Vooraleer ik de deze CSS eigenschappen demonstreer, wil ik je er attend op maken dat ze helemaal nog geen standaard zijn in alle browsers. Wie Internet Explorer gebruikt, kan nog niet ten volle genieten van deze nieuwe CSS3 mogelijkheden. Bovendien zijn de verschillende browsers een heuse klus voor de developers om alles in iedere browser perfect te krijgen. Iedere browser moet op dit moment nog apart aangesproken worden.

Browser-support:

Transitions:

2D Transformations

Animations

Gebruik om deze pagina te bekijken dus best geen Internet Explorer indien je alles wenst te zien werken. Mijn voorkeur na alle browsers te hebben getest gaat uit naar Google Chrome.

In dit artikel vind je een aantal voorbeelden waarbij ik de nieuwe eigenschappen gebruik.

Verschuiving

internet explorer incompatiblefirefox compatiblechrome compatiblesafari compatibleopera compatible

Uitleg

Om een verschuiving weer te geven gebruiken we CSS transitions. Er zijn twee stappen in de opbouw:

CSS

div{
 transition-eigenschap: margin-left;
 transition-duration: 1s;
 transition-timing-function: linear;
 transition-delay: 2s;
}

Short-hand code:

transition: margin-left 1s linear 2s;

Deze regel wordt toegepast bij wijziging van de opgegeven eigenschap (bijvoorbeeld bij :hover):

div:hover{
 margin-left: 200px;
}

Browsers

Voor de verschillende browsers moet er telkens een andere prefix gebruikt worden om de transition aan te maken.

-webkit-transition: ... /*Chrome en Safari*/
-moz-transition: ... /*Firefox*/
-o-transition: ... /*Opera*/
-ms-transition: ... /*??? Internet Explorer 10 ???*/

Javascript

In dit voorbeeld werk ik niet met de :hover van het element maar ik verander de margin-left via Javascript zoals in het codevoorbeeld hieronder:

bol.style.marginLeft = "200px";

Try-out

Verander de timing-function in de combobox en verander de duration (in seconden) om de transition te wijzigen. Vergelijk de verschillende mogelijkheden door te experimenteren met verschillende waarden.
Blijf klikken op de knop om van links naar rechts en terug van rechts naar links te gaan.

Opmerking: verander het woord prefix door webkit, moz of o voor respectievelijk Safari en Chrome, Firefox en Opera. De transition werkt niet in Internet Explorer.

Hier komt de code

Hier komt de code

Hier komt de code

Hier komt de code

Resultaat: Internet explorer toont alleen de verschuiving, niet de animation tijdens de verschuiving.
De webkit browsers scoren het best qua prestatie.

Rotatie

internet explorer incompatiblefirefox compatiblechrome compatiblesafari compatibleopera compatible

Uitleg

Om een element te roteren gaan we gelijkaardig te werk als een verschuiving. Eerst stellen we een transition in, daarna gaan we het element transformeren met een rotatie. Als je het vorige voorbeeld (verschuiving) begrijpt, dan heb je een rotatie eigenlijk ook al onder de knie.
Wat je wel moet weten is dat bij een rotatie het element altijd naar de opgegeven hoek draait. Het element draait dus niet het aantal graden dat je hebt opgegeven (tenzij de starthoek 0 graden is)! Wanneer een element reeds geroteerd was, draait het gewoon verder naar de opgegeven hoek vanaf de huidige hoek. Je kan dit duidelijk zien in de try-out hieronder.

CSS

Deze keer is de eigenschap die we aanpassen niet margin-left maar transform. De transform eigenschap verwacht ook een prefix:

div{
 -webkit-transition: 1s -webkit-transform linear;
 -moz-transition: 1s -moz-transform linear;
 -o-transition: 1s -o-transform linear;
}

Via CSS veranderen we via de :hover de transform waarde. Let ook op het feit dat Internet Explorer wél transform ondersteunt, maar geen transition. We zien de rotatie wel, maar deze verspringt van start naar eind zonder een transition ertussen.

div:hover{
 -webkit-transform: rotate(100deg);
 -moz-transform: rotate(100deg);
 -o-transform: rotate(100deg);
 -ms-transform: rotate(100deg);
}

Javascript

In plaats van op de :hover de transform waarde aan te passen kunnen we de waarde via Javascript veranderen bij bvb een button click:

bol.style.WebkitTransform = "rotate(100deg)";
bol.style.MozTransform = "rotate(100deg)";
bol.style.OTransform = "rotate(100deg)";
bol.style.msTransform = "rotate(100deg)";

Opmerking: Een plat streepje moet in Javascript vervangen worden door een hoofdletter, behalve bij msTransform.

Try-out

Hieronder kun je verschillende rotaties testen en vergelijken. Je kan een transition kiezen in de combobox. Rechts daarvan kan je de tijd (duration) instellen (in seconden). Daarnaast kun je ook de hoek (in graden) instellen. Let er wel op dat de hoek telkens verandert bij iedere test, anders zul je natuurlijk geen verschil merken aangezien een rotatie een hoekwijziging verwacht!

Hier komt de CSS code

Hier komt de Javascript code

Resultaat: Internet Explorer toont enkel de rotatie (geen transition)
De prestaties van Firefox en Opera zijn minder goed (bal draait minder vlot). Webkit browsers scoren net als bij de verschuiving het best.

Herhaalde rotatie

internet explorer incompatiblefirefox compatiblechrome compatiblesafari compatibleopera compatible

Uitleg

Hiervoor maakten we steeds gebruik van een CSS transition. Wanneer de verandering is gebeurd, blijft het daar dus bij. Maar wat als we die verandering willen herhalen (3 keer, 10 keer, oneindig)?
Hiervoor kunnen we CSS animation gebruiken. Ook deze manier van werken gebeurt in twee stappen:

CSS

Om een animation te maken, gebruiken we keyframes. We stellen deze in, in de CSS. We geven het de naam roteren. Deze naam heb je straks nog nodig. Wanneer we roteren aanroepen, dan wordt een verandering van 0deg naar 360deg telkens herhaald. Je kan keyframes nog anders gebruiken. Hiervoor verwijs ik naar w3schools.

@-webkit-keyframes roteren {
 from{
  -webkit-transform:rotate(0deg);
 }
 to{
  -webkit-transform:rotate(360deg);
 }
}

Voor Firefox vervang je het woord webkit door moz

@-moz-keyframes roteren {
 from{
  -moz-transform:rotate(0deg);
 }
 to{
  -moz-transform:rotate(360deg);
 }
}

Opmerking: momenteel werken keyframes enkel in Webkit browsers en in Firefox. Opera en Internet Explorer ondersteunen deze functie nog niet.

Javascript

Om de animation te starten maken we de animation eigenschap aan (bvb na een button click).
animation wordt met CSS (shorthand) als volgt opgebouwd:

animation: name duration timing-function delay iteration-count direction;

Wat nieuw is in vergelijking met transition is dat we nu ook een naam, iteration-count (aantal keer herhalen) en direction kunnen opgeven.
We roepen via javascript deze eigenschap op als volgt:

bol.style.WebkitAnimation = "roteren 1s linear infinite";
bol.style.MozAnimation = "roteren 1s linear infinite";

Hierdoor draait de bal elke seconde 360 graden, en dit een oneindig (infinite) aantal keer.
Om de animation te beëindigen maken we de animation eigenschap weer leeg (bvb na het klikken op een stopknop):

bol.style.WebkitAnimation = "";
bol.style.MozAnimation = "";

Try-out

Hieronder kun je de animation eens uittesten. Je kan de transition-timing-function en de snelheid (in seconden) net als in de vorige voorbeelden weer instellen.

Hier komt de CSS Animation code

Resultaat: Chrome en Safari werken weer goed, Firefox werkt maar presteert iets minder. Er is nog geen ondersteuning in Internet Explorer en Opera.

De bal rolt!

internet explorer incompatiblefirefox compatiblechrome compatiblesafari compatibleopera compatible

Uitleg

Na de vorige drie voorbeelden ben je nu in staat om een bal heen en weer, op een realistische wijze, te laten rollen. Je moet hiervoor een onderscheid maken in het naar rechts rollen en het naar links rollen van de bal. We maken opnieuw gebruik van een transition. Die zal twee veranderingen animeren: de rotatie en de verschuiving.
De startpositie van de bal is op 0 graden. Via een kleine berekening in Javascript adhv de omtrek van de bal en de af te leggen afstand (width) kun je de eindpositie van de bal (in graden) te weten komen:

var temp = width/omtrek;
var angle = 360*temp;

Door deze berekening rolt de bal op een realistische wijze.

CSS

In de CSS code stellen we de transition in. Merk op dat we nu all gebruiken omdat we twee eigenschappen moeten veranderen met dezelfde transition.

-prefix-transition = 3s all ease-in-out

Javascript

In Javascript maken we een onderscheid tussen het naar rechts rollen en het naar links rollen. Daarna passen we een rotatie (transform) en een verschuiving (margin-left) toe.

Naar rechts: we rollen naar de berekende hoek:

bol.style.PrefixTransform = "rotate(" + angle +"deg)";
bol.style.marginLeft = width + "px";

Naar links: we rollen terug naar een hoek van 0 graden:

bol.style.PrefixTransform = "rotate(0deg)";
bol.style.marginLeft = "0px";

Try-out

Klik op de linkse knop om de bal naar rechts te doen rollen, en op de rechtse om terug te rollen.

Hier komt de CSS transition code

Hier komt de CSS transform code

Resultaat: Chrome werkt het best, daarna volgen Safari, Firefox en Opera, in Internet Explorer werkt enkel de verschuiving en de rotatie (niet de transition)

Besluit

CSS3 animations, transitions en transforms zijn niet moeilijk om te gebruiken. Zolang Internet Explorer echter nog geen ondersteuning biedt aan transitions en animations, zullen deze eigenschappen volgens mij niet doorbreken.
Na deze voorbeelden in recente versies van Chrome, Safari, Firefox, Opera en Internet Explorer te hebben getest, is Google Chrome de performantste browser in mijn ogen.

Bronnen

About

Dit artikel werd geschreven door Thomas Sanders (www.thomassanders.be). In opdracht van de Howest, derde jaar New Media & Communication Technology voor de module Frontend Webdevelopment in januari 2012.
Reacties zijn welkom via Twitter: @sanders_t