CSS graphics animation

Objectives

In-class demonstration code

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script> var dx = 2, dy = 3, x = 30, y = 120; var elem = null; function draw() { if (elem == null) return; if (x < 0 || x > 160) dx = -dx; if (y < 0 || y > 260) dy = -dy; x += dx; y += dy; elem.style.left = x + "px"; elem.style.top = y + "px"; } window.onload = function() { elem = document.getElementById('ball'); setInterval(draw, 10); } </script> <style> h1 { text-align: center; } #content { display: block; width: 200px; height: 300px; margin: 0 auto; border: 1px solid #000000; background-color: #ff8080; } #ball { position: relative; top: 120px; left: 30px; } </style> </head> <body> <h1>Demo</h1> <div id="content"> <img src="ball.gif" id="ball" width="40" height="40"> </div> </body> </html>