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).
define(function() {

/**
 *  Objet de gestion d'une animation CSS.
 *
 *  @constructor
 */
var Animation = function (name, el) {
    this.name = 'anim-' + name;
    this.element = el;
    this.element.addEventListener('animationstart', this.onStart.bind(this), false);
    this.element.addEventListener('animationend', this.onEnd.bind(this), false);
    this.element.addEventListener('animationiteration', this.onIteration.bind(this), false);
};

Animation.CLASS_PAUSED = 'anim-paused';

Animation.prototype = {

    constructor: Animation,
    
    play: function () 
    {
        if (this.isPaused()) {
            this.element.classList.remove(Animation.CLASS_PAUSED);
        } else {
            this.element.classList.add(this.name);
        }
    },
    
    pause: function () 
    {
        this.element.classList.add(Animation.CLASS_PAUSED);
    },
    
    stop: function () 
    {
        this.element.classList.remove(Animation.CLASS_PAUSED);
        this.element.classList.remove(this.name);
    },
    
    isPaused: function () 
    {
        return this.element.classList.contains(Animation.CLASS_PAUSED);
    },
    
    isRunning: function () 
    {
        return !this.isPaused() && this.element.classList.contains(this.name);
    },
    
    isStopped: function () 
    {
        return !this.element.classList.contains(this.name);
    },
    
    onStart: function (e) 
    {
        console.log('start');
    },
    
    onEnd: function (e) 
    {
        console.log('end');
        this.stop();
    },
    
    onIteration: function (e) 
    {
        console.log('iteration');
    }
};

// Exports
return Animation;

});
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.

JACKSON, Dean ; HYATT, David ; MARRIN, Chris, et al.. CSS Animations. W3C,

CSS animations. Mozilla Developer Network,