Vorige hoofdstuk

Het echte werk: CSS3 Animation

Het animeren van elementen met css is relatief simpel, het enige grote nadeel op het moment is de ondersteuning van de verschillende browsers. Door de "vendor prefix" is je css nog bijzonder omslachtig. Daarnaast is het gewoonweg irritant om alles 4x te doen voor het zelfde resultaat, maar dat zullen we nog wel tegen komen. Ik laat uiteindelijk één voorbeeld zien met alle vendor prefixen, bij de rest zal je deze niet zien.

Animaties en hun CSS

Het animeren van een element word bepaald door 2 onderdelen, het animation attribuut en de in het animation attribuut gekozen keyframe attribuut. Laten we kijken naar een voorbeeld van de twee attributen.

.anim-cooker .anim-golf {
  position: absolute;
  left: 104px;
  top: 382px;
  background: url(img/golf.png);
  width: 401px;
  height: 147px;
animation: anim-golf 5s infinite; } @keyframes anim-golf { 0% { left: 104px; top: 382px; } 50% { left: 115px; top: 378px; } 100% { left: 104px; top: 382px; } }

In de hier bovenstaande css zie je animation: anim-golf 5s infinite; wat de animatie (anim-golf), duur van de animatie (5s) en de herhaling (infinite) bepaald. Daarnaast heb je ook @keyframes anim-golf { } wat de verandering in de animatie specificeerd.