Les transitions et animations CSS3

(^_^)

Jérémie Patonnier - KiwiParty 2012

http://jeremie.patonnier.net
@JeremiePat

Il était une fois...

Les images animées

GIF, aPNG, MNG

Flash

Seul solution d'animation complète, fiable et multiplateforme au début des années 2000

Javascript

Au début : DOM + setTimout/setInterval

Aujourd'hui : Canvas, WebGL + requestAnimationFrame

Et encore bien d'autre

• Animations SVG
• SMIL
• Vidéo HTML5

Les transitions CSS3

Status : Working Draft

Support navigateur

4.0 -moz-	1.0 -webkit-	3.2 -webkit-	10.5 -o-	10.0 -ms-

Paramétrer les transitions

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

Timing function ?

Delay

Rainbow me

Les animations CSS3

Status : Working Draft

Support navigateur

5.0 -moz-	?? -webkit-	4.0 -webkit-	12 -o-	10.0 -ms-

1. Définir l'animation

@keyframes monAnimation {  
      0% { /* ... */ }  
     30% { /* ... */ }  
     68%, 72% { /* ... */ }  
    100% { /* ... */ }  
}

2. Rattacher l'animation à un élément

.maClass {  
    animation-name: monAnimation; 
}

3. Paramétrer l'animation

• animation-duration
• animation-timing-function
• animation-delay
   
• animation-iteration-count
• animation-fill-mode
• animation-direction
• animation-play-state

Démo

• Mozilla Demo studio : 3D Image Transitions
• Smashing Magazine : The Guide To CSS Animation
• Tympanus : Animated Buttons with CSS3

Des évènements
dans le DOM

Les limites des
animations CSS

1. Les spécifications sont loin d'êtres stables
2. Il manque encore beaucoup de choses :
   • Animer des attributs
   • Animer des objets le long d'un chemin
   • Synchroniser des animations
3. Le controle des animations est très difficile sans Javascript

Merci :)

Questions ?