Cómo crear 15 efectos de transición CSS3 diferentes

En este tutorial, veremos 15 efectos diferentes que puede crear usando transiciones CSS.

CSS3 le permite agregar transiciones a diferentes propiedades CSS en cualquier elemento HTML. El uso de efectos de transición CSS le permite agregar diferentes tipos de animación a sus páginas web.

Si miras los íconos de las redes sociales en Paulund.es (mi sitio) verá cómo utiliza las transiciones CSS para cambiar la opacidad de las imágenes para que se desvanezcan en los íconos de las redes sociales.

Propiedad de transición CSS

Actualmente, las transiciones son compatibles con todos los navegadores modernos y se implementarán para Internet Explorer en IE 10.

Para usar la transición, debe agregar el prefijo del navegador al inicio de la propiedad.

 div{ transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */ } 

Con las transiciones puedes cambiar una determinada propiedad CSS o todas las propiedades de un elemento.

En los siguientes ejemplos de transiciones, lo estamos configurando para que podamos realizar múltiples cambios en el elemento.

Vea la demostración para verlos en acción.

La caja

Todos los siguientes ejemplos usan el mismo elemento HTML, un cuadro, por lo que podemos demostrar los diferentes efectos de transición de CSS, aquí es donde configuramos la configuración de transición.

 <div class="box"> </div> 

.box{
	background-color:#ccc;
	width:400px;
	height:250px;
	margin:10px auto;
	cursor:pointer;
	position:relative;
	transition: all 0.7s linear;
	-webkit-transition: all 0.7s linear;
	-moz-transition: all 0.7s linear;
	-o-transition: all 0.7s linear;
	-ms-transition: all 0.7s linear;
}

Ahora que hemos agregado la propiedad de transición a la clase de cuadro, solo tenemos que configurar los eventos de desplazamiento en los cuadros para ver el efecto de transición.

Mover hacia abajo

Mueva la caja hacia abajo.

 <div class="box move_down"> </div> 

 .move_down:hover{ top:30px; } 

Ascender

Mueva la caja hacia arriba.

 <div class="box move_up"> </div> 

 .move_up:hover{ top:-30px; } 

Mover hacia la izquierda

Mueva el cuadro a la izquierda.

 <div class="box move_left"> </div> 

 .move_left:hover{ left:-30px; } 

Mover a la derecha

Mueva el cuadro a la derecha.

 <div class="box move_right"> </div> 

 .move_right:hover{ left:30px; } 

Menor

Cambia la escala para hacer la caja más pequeña.

 <div class="box smaller"> </div> 

 .smaller:hover{ -webkit-transform: scale(0.7); } 

más grande

Cambia la escala para hacer la caja más grande.

 <div class="box larger"> </div> 

 .larger:hover{ -webkit-transform: scale(1.3); } 

Inclinación

Cambia el ángulo de la caja.

 <div class="box tilt"> </div> 

 .tilt:hover{ -webkit-transform: rotate(20deg); } 

Girar

Gire completamente la caja.

 <div class="box rotate"> </div> 

 .rotate:hover{ -webkit-transform: rotate(360deg); } 

Agregar sombras

Agregue sombra de cuadro a la caja.

 <div class="box shadows"> </div> 

 .shadows:hover{ box-shadow: 0 3px 25px #000; } 

Cambio de color de fondo

Cambia el color de fondo del cuadro.

 <div class="box bg_colour"> </div> 

 .bg_colour:hover{ background-color:#000; } 

Cambio de ancho

Cambia el ancho de la caja.

 <div class="box width_more"> </div> 

 .width_more:hover{ width:800px; } 

Cambio de altura

Cambia la altura de la caja.

 <div class="box height_more"> </div> 

 .height_more:hover{ height:600px; } 

Fundirse

Desvanece la caja a la vista al pasar el mouse.

 <div class="box fade_in"> </div> 

 .fade_in { opacity:0.3; } .fade_in:hover{ opacity:1; } 

Desaparecer

Desvanece la caja fuera de la vista al pasar el mouse.

 <div class="box fade_out"> </div> 

 .fade_out:hover{ opacity:0.3; } 

Radio del borde

Cambia el radio del borde del cuadro.

 <div class="box border_radius"> </div> 

 .border_radius:hover{ border-radius:50%; } 

Vea la demostración para verlos en acción.