Animations CSS

Petite expérimentation sur la manière de contrôler une animation CSS à l'aide d'un objet javascript simple.

Les spécifications CSS 3 Animation sont encore à l'état d'ébauche.

Test d'animation de la largeur d'un élément (Firefox 12, Chromium 18, Opera 12 beta).
Contenu indisponible.
Objet javascript simple de gestion d'animation
#box-test { 
    background: red; 
    width: 1%; 
    height: 20px; 
}
.anim-test {
    -webkit-animation-name: anim-test;
       -moz-animation-name: anim-test;
        -ms-animation-name: anim-test;
         -o-animation-name: anim-test;
            animation-name: anim-test;
    -webkit-animation-duration: 3s;
       -moz-animation-duration: 3s;
        -ms-animation-duration: 3s;
         -o-animation-duration: 3s;
            animation-duration: 3s;
    -webkit-animation-timing-function: linear;
       -moz-animation-timing-function: linear;
        -ms-animation-timing-function: linear;
         -o-animation-timing-function: linear;
            animation-timing-function: linear;
}
.anim-paused {
    -webkit-animation-play-state: paused;
       -moz-animation-play-state: paused;
        -ms-animation-play-state: paused;
         -o-animation-play-state: paused;
            animation-play-state: paused;
}
@-webkit-keyframes anim-test { to { width: 100%; } }
   @-moz-keyframes anim-test { to { width: 100%; } }
    @-ms-keyframes anim-test { to { width: 100%; } }
     @-o-keyframes anim-test { to { width: 100%; } }
        @keyframes anim-test { to { width: 100%; } }
Code CSS du test.
<div id="box-test"></div>
<p id="controls">
    <button id="play">PLAY</button>
    <button id="pause">PAUSE</button>
    <button id="stop">STOP</button>
</p>
Code HTML du test.
require(['rnb/ui/utils/Animation'], function(Animation) {
    var animBox = new Animation('test', document.getElementById('box-test')),
        actionListener = function(e) {
            var src = e.target;
            if (e.target.nodeName.toLowerCase() === 'button') {
                animBox[e.target.id]();
            }
        };
    document.getElementById('controls').addEventListener('click', actionListener, false);
});
Code javascript du test.
Titre
CSS Animations
Auteurs
Dean JACKSON
Auteurs
David HYATT
Auteurs
Chris MARRIN
Auteurs
Sylvain GALINEAU,
Auteurs
David BARON
Editeur
W3C
Date
Titre
CSS animations
Editeur
Mozilla Developer Network
Date