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

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

HTML ↴

<!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Поле INPUT меняет размеры при наборе текста (transition) [css3] </title>
<style type="text/css">
.notransition {
background-color: #ffba00;  
width: 200px;
padding: 10px;
border-radius: 5px;
}
.notransition:hover {
background-color: #ff7200;
}
.transition1 {
padding: 10px;
border-radius: 5px; 
width: 200px;
background-color: #ffba00;
-webkit-transition: background-color 3s;
-moz-transition: background-color 3s; 
-o-transition: background-color 3s; 
-ms-transition: background-color 3s; 
transition: background-color 3s;
}
.transition1:hover { 
background-color: #ff7200;
}
.transition2 { 
background-color: #ffba00;
width: 200px;
-webkit-transition: width 3s;
-moz-transition: width 3s;
-o-transition: width 3s; 
-ms-transition: width 3s; 
transition: width 3s;
} 
.transition2:hover {
width: 500px;
}
.transitiondemo3 {
width: 500px;
}
.transitiondemo3 .transition { 
background-color: #ffba00;
width: 100px; 
margin-left: 0;
-webkit-transition: margin-left 2s;
-moz-transition: margin-left 2s;
-o-transition: margin-left 2s; 
-ms-transition: margin-left 2s;
transition: margin-left 2s;
}
.transitiondemo3:hover .transition {
margin-left: 400px;
}
.transition4 {
background-color: #ffba00;
width: 200px; 
color: #fff;
-webkit-transition: color 5s;
-moz-transition: color 5s;
-o-transition: color 5s;
-ms-transition: color 5s;
transition: color 5s;
}
.transition4:hover { 
color: #000;
}
.transitiondemo5 .transition {
background-color: #ffba00;
width: 100px;
margin-left: 0; 
color: #fff;
-webkit-transition: color 3s, margin-left 2s, background-color 3s;
-moz-transition: color 3s, margin-left 2s, background-color 3s;
-o-transition: color 3s, margin-left 2s, background-color 3s; 
-ms-transition: color 3s, margin-left 2s, background-color 3s; 
transition: color 3s, margin-left 2s, background-color 3s;
}.transitiondemo5:hover .transition {
color: #000;
background-color: #ff7200;
margin-left: 400px;
}
.transitiondemo6 .transition61 {
background-color: #ffba00;
width: 100px;  
-webkit-transition: width 0;
-moz-transition: width 0s;
-o-transition: width 0;
-ms-transition: width 0; 
transition: width 0;
}
.transitiondemo6 .transition62 {
background-color: #ffba00; 
width: 100px;
-webkit-transition: width 2s;
-moz-transition: width 2s; 
-o-transition: width 2s;
-ms-transition: width 2s;
transition: width 2s;
}
.transitiondemo6 .transition63 {
background-color: #ffba00;
width: 100px;
-webkit-transition: width 4s;
-moz-transition: width 4s;
-o-transition: width 4s;
-ms-transition: width 4s;
transition: width 4s;
}
.transitiondemo6 .transition64 {
background-color: #ffba00;
width: 100px;
-webkit-transition: width 6s;
-moz-transition: width 6s; 
-o-transition: width 6s; 
-ms-transition: width 6s;
transition: width 4s;
}
.transitiondemo6:hover .transition {
width: 500px;
}
.transitiondemo7 .transition71 { 
background-color: #ffba00; 
width: 100px;
-webkit-transition: width ease 4s;
-moz-transition: width ease 4s;
-o-transition: width ease 4s;
-ms-transition: width ease 4s;
 transition: width ease 4s;
}
.transitiondemo7 .transition72 {
background-color: #ffba00;
width: 100px;
-webkit-transition: width linear 4s; 
-moz-transition: width linear 4s;
-o-transition: width linear 4s;
-ms-transition: width linear 4s;
transition: width linear 4s; 
}
.transitiondemo7 .transition73 {
background-color: #ffba00; 
width: 100px;
-webkit-transition: width ease-in 4s;
-moz-transition: width ease-in 4s;
-o-transition: width ease-in 4s;
-ms-transition: width ease-in 4s;
transition: width ease-in 4s; 
}
.transitiondemo7 .transition74 {
background-color: #ffba00;
width: 100px;
-webkit-transition: width ease-out 4s;
-moz-transition: width ease-out 4s; 
-o-transition: width ease-out 4s; 
-ms-transition: width ease-out 4s;
transition: width ease-out 4s;
}
.transitiondemo7 .transition75 {
background-color: #ffba00;
width: 100px; 
-webkit-transition: width ease-in-out 4s;
-moz-transition: width ease-in-out 4s;
-o-transition: width ease-in-out 4s;
-ms-transition: width ease-in-out 4s; 
transition: width ease-in-out 4s;
}
.transitiondemo7:hover .transition { 
width: 500px;
}
.transitiondemo8 .transition81 { 
background-color: #ffba00; 
width: 100px;
-webkit-transition: width ease 4s;
-moz-transition: width ease 4s;
-o-transition: width ease 4s;
-ms-transition: width ease 4s; 
transition: width ease 4s;
}
.transitiondemo8 .transition82 {
background-color: #ffba00;
width: 100px;
-webkit-transition: width 4s ease 2s; 
-moz-transition: width 4s ease 2s;
-o-transition: width 4s ease 2s;
-ms-transition: width 4s ease 2s;
transition: width 4s ease 2s; 
}
.transitiondemo8 .transition83 {
background-color: #ffba00; 
width: 100px;
-webkit-transition: width 4s ease -2s;
-moz-transition: width 4s ease -2s;
-o-transition: width 4s ease -2s;
-ms-transition: width 4s ease -2s;
transition: width 4s ease -2s; 
}
.transitiondemo8:hover .transition,
width: 500px;
}
</style>
</head>
<body>
<div class="notransition">Пример 1</div><br><div class="transition transition1">Пример 2</div><br>
<div class="transition transition2">Width from 200px to 500px</div><br>
<div class="transitiondemo3"><div class="transition transition3">Margin-left from 0 to 400px</div></div><br>
<div class="transition transition4">Color from #fff to #000</div><br>
<div class="transitiondemo5"><div class="transition">Пример 3</div></div><br>
<div class="transitiondemo6"> <div class="transition transition61">0s</div><div class="transition transition62">2s</div><div class="transition transition63">4s</div><div class="transition transition64">6s</div></div><br>
<div class="transitiondemo7"><div class="transition transition71">ease</div><div class="transition transition72">linear</div><div class="transition transition73">ease-in</div><div class="transition transition74">ease-out</div><div class="transition transition75">ease-in-out</div></div><br>
<div class="transitiondemo8"> <div class="transition transition81">delay 0s</div><div class="transition transition82">delay 2s</div><div class="transition transition83">delay -2s</div></div><br>

<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

ПРИМЕР ↴

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