<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
.recuadro {width:80px;height:80px;border:1px solid #ccc;margin:5px;
transition:width 1s;
-webkit-transition:width 1s;
-moz-transition:width 1s;
-o-transition:width 1s;
-ms-transition:width 1s;
padding:10px;
}
.derecha {width:300px;}
#color1 {
transition-timing-function: linear;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-o-transition-timing-function: linear;
-ms-transition-timing-function: linear;
}
#color2 {
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
-moz-transition-timing-function: ease;
-o-transition-timing-function: ease;
-ms-transition-timing-function: ease;
}
#color3 {
transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
-ms-transition-timing-function: ease-in;
}
#color4 {
transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
}
#color5 {
transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
}
</style>
<script>
$(document).ready(function(){
$(".recuadro").click(function(){
if($(this).hasClass("derecha"))
$(this).removeClass("derecha");
else
$(this).addClass("derecha");
})
})
</script>
<title>Ejemplo utilización transition-timing-function</title>
</head>
<body>
<h1>Ejemplo utilización transition-timing-function</h1>
<div class="recuadro" id="color1" style="background:#597326">linear</div>
<div class="recuadro" id="color2" style="background:#d00;">ease</div>
<div class="recuadro" id="color3" style="background:yellow;">ease-in</div>
<div class="recuadro" id="color4" style="background:#00aaff;">ease-out</div>
<div class="recuadro" id="color5" style="background:#808080;">ease-in-out</div>
<p><a href="http://www.lawebdelprogramador.com/">http://www.lawebdelprogramador.com/</a></p>
</body>
</html>