CSS Transitions And Class Timing

Chrome tests for: http://www.bennadel.com/blog/2461-understanding-css-transitions-and-class-timing.htm

by jrdiaz

HTML

<h1>CSS Transitions And Class Timing</h1>
<p>
    <a href="#" class="toggle">Toggle</a> &mdash; 
    <a href="#" class="add">Add</a> &mdash; 
    <a href="#" class="remove">Remove</a> &mdash; 
    <a href="#" class="remove-delay">Remove Delay</a> &mdash; 
    <a href="#" class="remove-redraw">Remove Redraw</a>
</p>
<div class="box animated">I Am Box</div>

CSS

div.box {
    position: fixed;
    top: 120px; left: 20px; width: 100px; height: 100px;
    border: 1px solid #CCCCCC;
    background-color: #FAFAFA;
    line-height: 100px;
    text-align: center;
}
div.moved {
    left: 400px;
}
div.translated {
    /* Test which translate type is better? http://jsperf.com/translate3d-vs-xy/86 */
    /* Right now the benefit of translate3D over translate is marginal and translate has better browsers support */

    /* Using translate. IE 8 or greater */
    /* translateZ may give a preformance boost */
    -webkit-transform: translateX(400px) translateZ(0);
       -moz-transform: translateX(400px) translateZ(0);
         -o-transform: translateX(400px) translateZ(0);
            transform: translateX(400px) translateZ(0);
    /* */
    /* Using translate3d. IE10 or greater * /
    -webkit-transform: translate3d(400px,0,0);
       -moz-transform: translate3d(400px,0,0);
         -o-transform: translate3d(400px,0,0);
            transform: translate3d(400px,0,0);
    /* */
}
div.animated {
    /* Enable hardware acceleration on webkit and removes flickering */
    -webkit-backface-visibility: hidden;
	-webkit-perspective: 1000; 
    /* */
    
    -webkit-transition: 1s ease;
    transition: 1s ease;
}

JavaScript

var box = $("div.box");

// Class toggle.
$("a.toggle").click(function () {
    box.toggleClass("translated");
});

// Add both classes at the same time.
$("a.add").click(function () {
    box.addClass("translated");
});

// Remove both classes at the same time.
$("a.remove").click(function () {
    box.removeClass("translated");
});

// Remove the transition class after delay.
$("a.remove-delay").click(function () {
    box.removeClass("moved");
    //setTimeout(function() { box.removeClass( "animated" ); }, 10); // Original
    setTimeout(function() { box.removeClass("moved"); }, 10);
});

// Remove the transition class after forced repaint. I got this tip from Alex McCaw.
$("a.remove-redraw").click(function () {
    box.removeClass("moved");
    // Forces a repaint in most browsers (apparently).
    var height = box[0].offsetHeight;
    //box.removeClass("animated"); // Original
    box.removeClass("moved");
});