Plaats de stylesheet in de head-sectie van jouw pagina en de html-code in de body-sectie van jouw pagina. De css-animatie zal dan in alle browsers perfect werken... behalve in IE (daar gaat alles "moeizaam"). Om nog een beetje de "IE-klanten" van dienst te zijn kan je het beste terug-schakelen naar IE7 (voor een betere performance). Onderop deze pagina heb ik de code die helemaal bovenaan de pagina (zelfs boven het DOCTYPE) moet komen, en weer dááronder de code die als eerste in de head-tag moet staan. Jammer dat IE zo buggy is. Deze procedure zou anders een schoolvoorbeeld zijn van hoe je met alleen maar css toch objecten kan bewegen. De css- en de html-code op deze pagina valideert volkomen "W3C".
<div class="css_animation">
<a href="#" class="css_1"><b></b></a><i>c</i>
<a href="#" class="css_2"><b></b></a><i>s</i>
<a href="#" class="css_3"><b></b></a><i>s</i>
<a href="#" class="css_4"><b></b></a><i>.</i>
<a href="#" class="css_5"><b></b></a><i>a</i>
<a href="#" class="css_6"><b></b></a><i>n</i>
<a href="#" class="css_7"><b></b></a><i>i</i>
<a href="#" class="css_8"><b></b></a><i>m</i>
<a href="#" class="css_9"><b></b></a><i>a</i>
<a href="#" class="css_10"><b></b></a><i>t</i>
<a href="#" class="css_11"><b></b></a><i>i</i>
<a href="#" class="css_12"><b></b></a><i>e</i>
<a href="#" class="css_13"><b></b></a><i>.</i>
<a href="#" class="css_14"><b></b></a><i>g</i>
<a href="#" class="css_15"><b></b></a><i>e</i>
<a href="#" class="css_16"><b></b></a><i>e</i>
<a href="#" class="css_17"><b></b></a><i>n</i>
<a href="#" class="css_18"><b></b></a><i>.</i>
<a href="#" class="css_19"><b></b></a><i>j</i>
<a href="#" class="css_20"><b></b></a><i>a</i>
<a href="#" class="css_21"><b></b></a><i>v</i>
<a href="#" class="css_22"><b></b></a><i>a</i>
<a href="#" class="css_23"><b></b></a><i>s</i>
<a href="#" class="css_24"><b></b></a><i>c</i>
<a href="#" class="css_25"><b></b></a><i>r</i>
<a href="#" class="css_26"><b></b></a><i>i</i>
<a href="#" class="css_27"><b></b></a><i>p</i>
<a href="#" class="css_28"><b></b></a><i>t</i>
<a href="#" class="css_29"><b></b></a><i>.</i>
<a href="#" class="css_30"><b></b></a><i>w</i>
<a href="#" class="css_31"><b></b></a><i>o</i>
<a href="#" class="css_32"><b></b></a><i>r</i>
<a href="#" class="css_33"><b></b></a><i>d</i>
<a href="#" class="css_34"><b></b></a><i>t</i>
<a href="#" class="css_35"><b></b></a><i>.</i>
<a href="#" class="css_36"><b></b></a><i>e</i>
<a href="#" class="css_37"><b></b></a><i>r</i>
<a href="#" class="css_38"><b></b></a><i>.</i>
<a href="#" class="css_39"><b></b></a><i>g</i>
<a href="#" class="css_40"><b></b></a><i>e</i>
<a href="#" class="css_41"><b></b></a><i>b</i>
<a href="#" class="css_42"><b></b></a><i>r</i>
<a href="#" class="css_43"><b></b></a><i>u</i>
<a href="#" class="css_44"><b></b></a><i>i</i>
<a href="#" class="css_45"><b></b></a><i>k</i>
<a href="#" class="css_46"><b></b></a><i>t</i>
<a href="#" class="css_47"><b></b></a><i>.</i>
<a href="#" class="css_48"><b></b></a><i>o</i>
<a href="#" class="css_49"><b></b></a><i>p</i>
<a href="#" class="css_50"><b></b></a><i>.</i>
<a href="#" class="css_51"><b></b></a><i>d</i>
<a href="#" class="css_52"><b></b></a><i>e</i>
<a href="#" class="css_53"><b></b></a><i>z</i>
<a href="#" class="css_54"><b></b></a><i>e</i>
<a href="#" class="css_55"><b></b></a><i>.</i>
<a href="#" class="css_56"><b></b></a><i>p</i>
<a href="#" class="css_57"><b></b></a><i>a</i>
<a href="#" class="css_58"><b></b></a><i>g</i>
<a href="#" class="css_59"><b></b></a><i>e</i>
<a href="#" class="css_60"><b></b></a><i>.</i>
</div>
<style type="text/css">
i{display:none}
.css_animation a:hover b {padding:10px;display:block;position:absolute;top:0;z-index:-2;width:1300px;height:240px;background:url(http://static.dns5.nl/css-animation.jpg)}
.css_animation {width:300px;height:240px;position:relative;overflow:hidden;z-index:10;border:5px solid #808080;background:url(http://static.dns5.nl/css-animation.jpg);margin-left:50px}
.css_animation a {height:240px;width:5px;float:left}
.css_animation a.css_60:hover b {left:0;}
.css_animation a.css_59:hover b {left:-10px;}
.css_animation a.css_58:hover b {left:-20px;}
.css_animation a.css_57:hover b {left:-30px;}
.css_animation a.css_56:hover b {left:-40px;}
.css_animation a.css_55:hover b {left:-50px;}
.css_animation a.css_54:hover b {left:-60px;}
.css_animation a.css_53:hover b {left:-70px;}
.css_animation a.css_52:hover b {left:-80px;}
.css_animation a.css_51:hover b {left:-90px;}
.css_animation a.css_50:hover b {left:-100px;}
.css_animation a.css_49:hover b {left:-110px;}
.css_animation a.css_48:hover b {left:-120px;}
.css_animation a.css_47:hover b {left:-130px;}
.css_animation a.css_46:hover b {left:-140px;}
.css_animation a.css_45:hover b {left:-150px;}
.css_animation a.css_44:hover b {left:-160px;}
.css_animation a.css_43:hover b {left:-170px;}
.css_animation a.css_42:hover b {left:-180px;}
.css_animation a.css_41:hover b {left:-190px;}
.css_animation a.css_40:hover b {left:-200px;}
.css_animation a.css_39:hover b {left:-210px;}
.css_animation a.css_38:hover b {left:-220px;}
.css_animation a.css_37:hover b {left:-230px;}
.css_animation a.css_36:hover b {left:-240px;}
.css_animation a.css_35:hover b {left:-250px;}
.css_animation a.css_34:hover b {left:-260px;}
.css_animation a.css_33:hover b {left:-270px;}
.css_animation a.css_32:hover b {left:-280px;}
.css_animation a.css_31:hover b {left:-290px;}
.css_animation a.css_30:hover b {left:-300px;}
.css_animation a.css_29:hover b {left:-310px;}
.css_animation a.css_28:hover b {left:-320px;}
.css_animation a.css_27:hover b {left:-330px;}
.css_animation a.css_26:hover b {left:-340px;}
.css_animation a.css_25:hover b {left:-350px;}
.css_animation a.css_24:hover b {left:-360px;}
.css_animation a.css_23:hover b {left:-370px;}
.css_animation a.css_22:hover b {left:-380px;}
.css_animation a.css_21:hover b {left:-390px;}
.css_animation a.css_20:hover b {left:-400px;}
.css_animation a.css_19:hover b {left:-410px;}
.css_animation a.css_18:hover b {left:-420px;}
.css_animation a.css_17:hover b {left:-430px;}
.css_animation a.css_16:hover b {left:-440px;}
.css_animation a.css_15:hover b {left:-450px;}
.css_animation a.css_14:hover b {left:-460px;}
.css_animation a.css_13:hover b {left:-470px;}
.css_animation a.css_12:hover b {left:-480px;}
.css_animation a.css_11:hover b {left:-490px;}
.css_animation a.css_10:hover b {left:-500px;}
.css_animation a.css_9:hover b {left:-510px;}
.css_animation a.css_8:hover b {left:-520px;}
.css_animation a.css_7:hover b {left:-530px;}
.css_animation a.css_6:hover b {left:-540px;}
.css_animation a.css_5:hover b {left:-550px;}
.css_animation a.css_4:hover b {left:-560px;}
.css_animation a.css_3:hover b {left:-570px;}
.css_animation a.css_2:hover b {left:-580px;}
.css_animation a.css_1:hover b {left:-590px;}
</style>
<!--[if IE]>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v">
<![endif]-->
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<![endif]-->