Animation

<div class="banner-ani"></div>

.banner-ani {
    background-image: url(/sandbox/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; }
}