De ninguna manera. La idea es mostrar otra forma de animación. Al usar márgenes del ciento por ciento, nos estamos asegurando de que las imágenes vengan siempre "desde fuera", y al teminar en menos del cincuenta por ciento sabemos que antes de detenerse se van a cruzar. Más, menos, pero se cruzan.
En cambio de esta forma
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>CRUZA IMÁGENES.</title>
<script type="text/javascript">
var dist = 0;
function mueve() {
if(dist < 50) {
dist = dist + .25;
document.getElementById("izq").style.marginLeft = dist + "%";
document.getElementById("der").style.marginRight = dist + "%";
setTimeout(mueve, 20);
}
}
onload = mueve;
</script>
<style type="text/css">
div {height: 128px; width: 100%; background-color: yellow; position: relative; }
#der {display: inline; margin-top: 24px; margin-right: 0%; position: absolute; right: 0px; }
#izq {display: inline; margin-left: 0%; position: absolute; left: 0; }
</style>
</head>
<body>
<div>
<img src="http://img197.imageshack.us/img197/2369/puzzleh.gif" id="der" />
<img src="http://img830.imageshack.us/img830/8478/puzzlev.gif" id="izq" />
</div>
</body>
</html>
arrancan visibles dentro de su caja (uno a cada lado) y se juntan hasta detenerse justo después de cruzarse totalmente.