HTML

<h3>CSS Transparent Background Animation</h3> <div class="banner-ani"></div>

CSS

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

JavaScript