CSS3 Animation

The Web Book


CSS3 Animation Example Code

HTML CODE ..................................................... <!DOCTYPE html> <html> <body> <div id="f1"> <img src="frame1.png" width="300" height="200" /> <img src="frame2.png" width="300" height="200" /> </div> </body> </html> CSS CODE ................................................... @-moz-keyframes myAnimation { 0% {opacity:1;} 50% {opacity:0;} 100% {opacity:1;} } #f1 img {position:absolute;} #f1 img { -moz-animation-name: myAnimation; -moz-animation-timing-function: ease-in-out; -moz-animation-iteration-count: infinite; -moz-animation-duration: 10s; } #f1 img:nth-of-type(1) {-moz-animation-delay: 5s;} #f1 img:nth-of-type(2) {-moz-animation-delay: 0s;} Back