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.

.. include:: /www/lab/web-animation/index.html :start: 13 :end: 18
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
Jackson DEAN
Auteurs
Hyatt DAVID
Auteurs
Marrin CHRIS
Auteurs
Galineau, SYLVAIN
Auteurs
Baron DAVID
Editeur
W3C
Date
Titre
CSS animations
Editeur
Mozilla Developer Network
Date