CSS animation delay

by midnightlightning

HTML

<div id="square" class="csstransition">Hello World</div>

<button id="nodelay">No Delay</button><button id="delay">Delay</button><button id="reset">Reset</button>

CSS

#square { width:75px; height:38px; text-align:center; color:#FFF; background-color:#F00; position:relative; padding:3px 2px; }

.csstransition { -webkit-transition:left 2s ease-out; -moz-transition:left 2s ease-out; -o-transition:left 2s ease-out; transition:left 2s ease-out; }

JavaScript

$(document).ready(function() {
    $('button#nodelay').on('click', function() {
        var $el = $('#square');
        $el.removeClass('csstransition');
        $el.css('left', '100px');
        $el.addClass('csstransition');
    });
    $('button#delay').on('click', function() {
        var $el = $('#square');
        $el.removeClass('csstransition');
        $el.css('left', '100px');
        setTimeout(function() { $el.addClass('csstransition'); }, 1);
    });
    $('button#reset').on('click', function() {
        var $el = $('#square');
        $el.css('left', '0px');
    });
});