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

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

HTML ↴

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Постепенное увеличение блока с заменой цвета фона  (CSS3 animation-name animation-duration animation-iteration animation-direction)</title>
<style type="text/css">
@-webkit-keyframes resize {
  0% {
    padding: 0;
  }
  50% {
    padding: 0 20px;
    background-color:rgba(255,0,0,0.2);
  }
  100% {
    padding: 0 100px;
    background-color:rgba(255,0,0,0.9);
  }
}
@-moz-keyframes resize {
  0% {
    padding: 0;
  }
  50% {
    padding: 0 20px;
    background-color:rgba(255,0,0,0.2);
  }
  100% {
    padding: 0 100px;
    background-color:rgba(255,0,0,0.9);
  }
}
@-o-keyframes resize {
  0% {
    padding: 0;
  }
  50% {
    padding: 0 20px;
    background-color:rgba(255,0,0,0.2);
  }
  100% {
    padding: 0 100px;
    background-color:rgba(255,0,0,0.9);
  }
}
@keyframes resize {
  0% {
    padding: 0;
  }
  50% {
    padding: 0 20px;
    background-color:rgba(255,0,0,0.2);
  }
  100% {
    padding: 0 100px;
    background-color:rgba(255,0,0,0.9);
  }
}

#animationDemo {
  height:100px;
  width:500px;
  margin:0 auto;
}

#animationDemo #box {
  height:300px;
  width:300px;
  margin:0 auto;
  border:1px red solid;
  background-color:rgba(255,0,0,0.7);
}

#animationDemo:hover #box, #animationDemo.hover_effect #box {
height:400px;
  -webkit-animation-name: resize;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 4;
  -webkit-animation-direction: alternate;

-moz-animation-name: resize;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: 4;
  -moz-animation-direction: alternate;

-o-animation-name: resize;
  -o-animation-duration: 1s;
  -o-animation-iteration-count: 4;
  -o-animation-direction: alternate;

animation-name: resize;
  animation-duration: 1s;
  animation-iteration-count: 4;
  animation-direction: alternate;
}

</style>

</head>
<body>
<p>Этот пример не работает в Internet Explorer</p>

<div id="animationDemo" class="hover">
  <div id="box" class="shadow"></div>
  <p class="center">Hover over me</p>
</div>
 <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

ПРИМЕР ↴

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