<div class="cuadrado">Sin ningĂșn tipo de Transicion ni Velocidad</div> <div class="cuadrado transitionColor">Transicion de Color del tipo Ease</div> <div class="cuadrado transitionAltura">Transicion de Altura tipo Ease-in</div> <div class="cuadrado transitionTodo">Transicion de Color y Altura Linear</div>
.cuadrado { width: 100px; height: 60px; display: inline-block; background: #1AB3A3; color:white; } .cuadrado:hover{ height:150px; background: #FF8783; } .transitionColor{ transition: background 2s ease; -webkit-transition: background 2s ease; -moz-transition: background 2s ease; -o-transition: background 2s ease; } .transitionAltura{ transition: height 2s ease-in; -webkit-transition: height 2s ease-in; -moz-transition: height 2s ease-in; -o-transition: height 2s ease-in; } .transitionTodo{ transition: height 2s linear, background 1s linear; -webkit-transition: height 2s linear, background 1s linear; -moz-transition: height 2s linear, background 1s linear; -o-transition: height 2s linear, background 1s linear; }