5 ejemplos de transiciones de CSS3

Desde el lanzamiento de CSS3, las transiciones permiten a los diseñadores web y desarrolladores web front-end crear animaciones totalmente alucinantes sin necesidad de usar JavaScript. En este artículo, veremos 5 ejemplos impresionantes que puedes utilizar en tus propios proyectos. ¿Preparado? ¡Pues vamos allá!

¿Qué son las transiciones de CSS?

Introducidas hace unos años con la especificación CSS3, la propiedad de transition permite a los desarrolladores front-end cambiar sin problemas los valores de las propiedades en un momento dado.

No ha sido hasta este mismo año 2019, que las transiciones por fin son soportadas por todos los navegadores modernos. Si quieres utilizar transiciones en navegadores más antiguos, posiblemente tendrás que utilizar prefijos de proveedores como -webkit-, -moz- o -o-. Consulta la web Can I use para obtener más información sobre compatibilidad con los distintos navegadores.

Si necesitas más información sobre las transiciones de CSS, W3 Schools tiene un artículo conciso que te enseñará todo lo que necesitas saber para comenzar.

Cambio de color de fondo suave

Un efecto simple, pero común en muchos sitios web modernos, es contar con un fondo que va cambiando de color suavamente al posarse con el cursor. Comencemos con este simple código HTML:

<div class="color">Change Color</div>

Y ahora viene la magia del CSS. Fijate en la propiedad transition de la línea 12, que anima nuestro div al pasar el cursor.

div.color {
    margin: 121px 149px;
    width: 483px;
    height: 298px;
    background: #676470;
    color: #fff;
    font-family: Lato;
    font-weight: 900;
    font-size: 3.4em;
    text-align: center;
    line-height: 298px;
    transition: all 0.3s ease;
}

div.color:hover {
    background: #53a7ea;
}

Cambio de fondo algo más avanzado

Un ejemplo un poco más avanzado para que veas que no es tan difícil realizar animaciones verdaderamente chulas con las transiciones de CSS3. Aquí tienes el HTML:

<div class="container">
    <div class="circle one"></div>
    <div class="circle two"></div>
    <div class="circle three"></div>
    <div class="circle four"></div>
</div>

Y el correspondiente código CSS, donde puedes ver el uso de la transition y transform, para animaciones más sofisticadas.

.circle {
	border-radius: 50%;
	left: calc(50% - 6.25em);
	top: calc(50% - 12.5em);
	transform-origin: 50% 12.5em;
	width: 12.5em;
	height: 12.5em;
	position: absolute;
	box-shadow: 0 1em 2em rgba(0, 0, 0, .5);
}

.one,
.three {
	background: rgba(142, 92, 205, .75);
	transition: background 1s ease-in;
}

.two,
.four {
	background: rgba(236, 252, 100, .75);
}


.one {
	transform: rotateZ(0);
}

.two {
	transform: rotateZ(90deg);
}

.three {
	transform: rotateZ(180deg);
}

.four {
	transform: rotateZ(-90deg);
}

.circle:hover {
  background: rgba(142, 92, 205, .25);
}

Botones con bordes redondeados y con color degradado

Para muestra, un botón, como se suele decir. Aquí te proponemos un botón que luce realmente bien hecho enteramente con CSS3. El HTML es muy simple:

<a class="btn" href="#">
  <span>A button!</span>
</a>

El CSS es un poco más complejo y demuestra el verdadero poder de CSS3.

body {
  background: #e7e8e9;
  padding: 40px;
}

.btn {
	background-image: linear-gradient(to right, #006175 0%, #00a950 100%);
	border-radius: 40px;
  box-sizing: border-box;
	color: #00a84f;
	display: block;
	font: 1.125rem 'Oswald', Arial, sans-serif; /*18*/
	height: 80px;
	letter-spacing: 1px;
	margin: 0 auto;
	padding: 4px;
	position: relative;
  text-decoration: none;
	text-transform: uppercase;
	width: 264px;
	z-index: 2;
}

.btn:hover {
	color: #fff;
}

.btn span {
	align-items: center;
	background: #e7e8e9;
	border-radius: 40px;
	display: flex;
	justify-content: center;
	height: 100%;
	transition: background .5s ease;
	width: 100%;
}

.btn:hover span {
	background: transparent;
}

Diferentes transiciones para hover on / hover off

Las transiciones pueden ser diferentes para los estados hover on y hover off, como se demuestra en el siguiente HTML...

<a id="button" href="#">Buy Now!</a>

...y el CSS:

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}

Hacer hover en un elemento afecta a otro

Terminemos este resumen con un ejemplo interesante de cómo haciendo hover sobre un elemento afecte a otro. Comencemos creando dos contenedores HTML:

<div id="box1">#box1</div>
<div id="box2">#box2</div>

Y ahora, echemos un vistazo al CSS:

#box2 {
    position: absolute;
    left: 120px;
    background: blue;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}
  #box1:hover + #box2 {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    left: calc(100% - 102px);
    background: yellow;
}