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:
IE 10: aangekondigd
Firefox 4.0 +
Chrome 1.0 +
Safari 3.2 +
Opera 10.5 +
2D Transformations
IE 9 +
Firefox 3.5 +
Chrome 1.0 +
Safari 3.2 +
Opera 10.5 +
Animations
IE 10: aangekondigd
Firefox 5 +
Chrome 1.0 +
Safari 4.0 +
Opera ???
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
Uitleg
Om een verschuiving weer te geven gebruiken we CSS transitions. Er zijn twee stappen in de opbouw:
Eerst en vooral stellen we de transition in. Dit doen we op het gewenste element. Je kan de eigenschap waarop de transition toegepast moet worden specificiëren. Voor een horizontale verschuiving kun je bvb de margin-left gebruiken. Je kan de eigenschap ook instellen op all. Dan zullen alle eigenschappen van het element die wijzigen de transition toepassen. (bvb margin en opacity, op hetzelfde moment)
De tweede stap is er dus voor te zorgen dat de waarde van de eigenschap margin-left verandert . Dit kan bvb via CSS op de :hover van datzelfde element, maar kan gerust ook via Javascript. Bij een button click verander je gewoon de style. Let erop dat de wijziging na de transition instelling (stap 1) gebeurt!
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
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:
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.
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
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:
Eerst gaan we de animation definiëren met CSS.
Daarna starten we de animation door via Javascript de animation op te roepen.
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.
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):
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!
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.
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.
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
