ИЗБРАННЫЕ ПРИМЕРЫ JAVASCRIPT+CSS 2013 года

Библиотека javascript SE@RCHER ИЗБРАННЫЕ ПРИМЕРЫ 2013 г. ЯНВАРЬ >>>

HTML ↴

<!DOCTYPE HTML>
<HTML>
<head> 
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<title>Свойство CSS3 animation-name</title>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:mymove;
animation-duration:5s;
/* Firefox */
-moz-animation-name:mymove;
-moz-animation-duration:5s;
/* Safari and Chrome */
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
/* Opera */
-o-animation-name:mymove;
-o-animation-duration:5s;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-moz-keyframes mymove /* Firefox */
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:200px;}
}
@-o-keyframes mymove /* Opera */
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer.</p>
<div></div>
<p><b>Note:</b> Specify the animation-duration property. Otherwise the duration is 0, and the animation will not be played.</p>
 <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

ИЗБРАННЫЕ ПРИМЕРЫ JAVASCRIPT+CSS 2013 года

HTML ↴

размер Kb

ПРИМЕР ↴

✔ пример в полном окне