CSS - Animation

This code sample shows how to animate a background image using CSS.

HTML
<div class="banner-ani"></div>
CSS
.banner-ani {
    background-image: url(/sandbox/ui/assets/image/cool-dog-bg.png);
    background-color: transparent;
    background-position: 0px -196px;
    background-repeat:no-repeat;
    width: 230px;
    height: 196px;

    /* 
    after 2 seconds, provide a 1.5 second animation
    of the background image scrolling down from its
    pre-existing position of 0 -196px to 0 0

    css animation does not work in <= ie9 
    */
    -webkit-transition:all 1.5s ease;
    -moz-transition:all 1.5s ease;
    -webkit-animation: animatedBrandshopBannerBackground 1.5s 2s linear;
    -moz-animation: animatedBrandshopBannerBackground 1.5s 2s linear;
    animation: animatedBrandshopBannerBackground 1.5s 2s linear;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@keyframes animatedBrandshopBannerBackground {
    from { background-position: 0 -196px; }
    to { background-position: 0 0; }
}

demo


This code sample shows how to animate a background image using CSS and jQuery.

CSS
.banner-ani {
    background-image: url(/sandbox/ui/assets/image/cool-dog-bg.png);
    background-color: transparent;
    background-position: 0px -196px;
    background-repeat:no-repeat;
    width: 230px;
    height: 196px;
}
JavaScript & jQuery
$(function($){
    /*
    after 2 seconds, provide a 1.5 second animation
    of the background image scrolling down from its
    pre-existing position of 0 -196px to 0 0

    jquery plugin required: jquery.bgpos.js
    */
    var id,
        $bannerani = $('.banner-ani'),
        animate = function() {
            $bannerani.stop().animate({backgroundPosition:"(0 0)"}, {
                duration:1500,
                complete: function(){
                    console.log('Animation Completed');
                }
            });
        };

    clearTimeout(id);
    id = setTimeout(animate(), 2000);

});

demo