I have to write a simple HTML banner rotator in JavaScript with animated transition using CSS3. I came with this:
HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/banner.css" type="text/css" /> <script type="text/javascript" src="scripts/banner.js"></script> </head> <body> <div><img src="img/banner1.jpg" alt="" id="banner" /></div> <script>window.onload = rotateAnimation('banner', 5000);</script> </body> </html>CSS:
#banner { animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; } @keyframes myfirst { 0% {opacity: 0;} 10% {opacity: 1;} 90% {opacity: 1;} 100% {opacity: 0;} }JavaScript:
var i = 0; var banners = new Array("img/banner1.jpg", "img/banner2.jpg", "img/banner3.jpg"); function rotateAnimation(el, speed) { var elem = document.getElementById(el); elem.src = banners[i]; setTimeout('rotateAnimation(\''+el+'\','+speed+')',speed); i++; if(i === banners.length) i = 0; }
But as I expected, the animation desynchronise itself and I don't know how to make this on one timer only.
It didn't need an CSS3 animation. All it needed was JS script that change images and CSS3 trasition property. Didn't know that transitions work if JS is changing something.