Сдвигающиеся под курсором ссылки

Для наглядного примера работы скрипта создания сдвигающихся ссылок при помощи CSS, обратите внимание на ссылки расположенные ниже. При наведении курсора мышки на одну из ссылок, она плавно сдвинется вправо на указанное значение (конечно же не работает в IE), а так работает в любых нормальных и современных браузерах. Если у Вас не работает, то рекомендуем поменять браузер на Mozilla FireFox :-)

<style>
#leftt p a {margin:5px; display:block;
transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-khtml-transition: all 0.3s ease-in;
-opera-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;}

#leftt p a:hover {cursor: pointer;  
transform:translate(20px,0);
-moz-transform:translate(20px,0);
-webkit-transform:translate(20px,0);
-khtml-transform:translate(20px,0);
-opera-transform:translate(20px,0);
-ms-transform:translate(20px,0);}
</style>

<style>
#leftt p a {margin:5px; display:block;
transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-khtml-transition: all 0.3s ease-in;
-opera-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;}

#leftt p a:hover {cursor: pointer;  
transform:translate(20px,0);
-moz-transform:translate(20px,0);
-webkit-transform:translate(20px,0);
-khtml-transform:translate(20px,0);
-opera-transform:translate(20px,0);
-ms-transform:translate(20px,0);}
</style>

HTML разметка кода:

<div id="leftt">
 <p>  <a href="#">Сдвигающаяся CSS  ссылка 1</a> </p>
 <p>  <a href="#">Сдвигающаяся CSS ссылка 2</a> </p>
</div>