¿Qué son las transiciones CSS y cómo usarlas?

Publicado: 2022-02-16

En un artículo anterior, aprendiste los conceptos básicos de las animaciones CSS y cómo usarlas. Podríamos decir que las transiciones son una forma simplificada de animación con algunas diferencias entre ellas, siendo la forma de disparar la animación la más relevante.

Otra diferencia es que las transiciones tienen solo dos estados (estado inicial y final), mientras que puede definir varios estados para un elemento animado con la regla @keyframes . Las transiciones se activan en una acción, por ejemplo, al pasar el mouse sobre un elemento, pero las animaciones pueden ocurrir sin una acción específica, por ejemplo, con un retraso de animación después de cargar la página.

En este tutorial vamos a aprender los conceptos básicos de CSS Transitions con un ejemplo práctico. Además, también aprenderá cómo usar un sprite de imagen con CSS.

¡Empecemos!

Paso 1. - El diseño propuesto

Transiciones CSS y cómo usarlas

Disponemos de 4 tarjetas promocionando los servicios habituales de una agencia web. Al pasar el cursor sobre ellos, cada uno de los elementos dentro de la tarjeta tendrá una transición diferente para lograr el efecto deseado.

Paso # 2. - El HTML

  • Abra su editor de código preferido
  • Cree un archivo HTML llamado index.html
  • Copia y pega este codigo:
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>CSS Transitions</title>
 <link href="https://fonts.googleapis.com/css?family=Oswald|Quattrocento&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <div class="experts">
 <h2>What We Do</h2>
 <div class="service-card-container">
 <div class="service-card">
 <div class="front">
 <span class="icon-strategy"></span>
 <h3>Strategy</h3>
 </div>
 <div class="hidden">
 <p>The main strategy of a web site is to make visitors convert.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-ui-ux-design"></span>
 <h3>UI / UX Design</h3>
 </div>
 <div class="hidden">
 <p>The design of your site Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, error.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-development"></span>
 <h3>Development</h3>
 </div>
 <div class="hidden">
 <p>Our team of developers Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-digital-marketing"></span>
 <h3>Digital Marketing</h3>
 </div>
 <div class="hidden">
 <p>Marketing experts Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 </div>
 </div>
 </body>
 </html>
ABRIR EN EMERGENTE
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>CSS Transitions</title>
 <link href="https://fonts.googleapis.com/css?family=Oswald|Quattrocento&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <div class="experts">
 <h2>What We Do</h2>
 <div class="service-card-container">
 <div class="service-card">
 <div class="front">
 <span class="icon-strategy"></span>
 <h3>Strategy</h3>
 </div>
 <div class="hidden">
 <p>The main strategy of a web site is to make visitors convert.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-ui-ux-design"></span>
 <h3>UI / UX Design</h3>
 </div>
 <div class="hidden">
 <p>The design of your site Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate, error.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-development"></span>
 <h3>Development</h3>
 </div>
 <div class="hidden">
 <p>Our team of developers Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 <div class="service-card">
 <div class="front">
 <span class="icon-digital-marketing"></span>
 <h3>Digital Marketing</h3>
 </div>
 <div class="hidden">
 <p>Marketing experts Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
 <a href="#">Read more</a>
 </div>
 </div>
 </div>
 </div>
 </body>
 </html>

191125 transiciones css 001

El contenedor de tarjetas de servicio tiene 4 tarjetas diferentes. Cada tarjeta se compone de un icono, un título, un texto y un enlace a la información correspondiente en el sitio. El texto y el enlace se mostrarán al pasar el cursor sobre la tarjeta; de lo contrario, se ocultarán.

Paso 3. - Los estilos CSS básicos

  • Cree un archivo CSS y llámelo style.css ; en el código HTML ya hay un enlace a este archivo y a Google Fonts
  • Copie y pegue estos estilos para cambiar los estilos de tipografía y el color de fondo de las tarjetas:
 /* BASIC RESET */

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 list-style: none;
 text-decoration: none;
 }

 /* TYPOGRAPHY */

 body {
 font-family: 'Quattrocento', serif;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 a {
 font-family: 'Oswald', sans-serif;
 }

 /* BACKGROUND */

 .service-card {
 background-color: #0a1128;
 color: white;
 }

 .service-card a {
 color: white;
 }
ABRIR EN EMERGENTE
 /* BASIC RESET */

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 list-style: none;
 text-decoration: none;
 }

 /* TYPOGRAPHY */

 body {
 font-family: 'Quattrocento', serif;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 a {
 font-family: 'Oswald', sans-serif;
 }

 /* BACKGROUND */

 .service-card {
 background-color: #0a1128;
 color: white;
 }

 .service-card a {
 color: white;
 }

191125 transiciones css 002

Etapa 4. - Los estilos de diseño

Usemos CSS Grid para crear las tarjetas y organizarlas horizontalmente.

  • Edite el código CSS:
 /* LAYOUT */

 .experts {
 margin-top: 36px;
 }

 .experts h2 {
 text-align: center;
 }

 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 }

El contenedor de la tarjeta de servicio es una cuadrícula horizontal con 4 columnas. Cada tarjeta se ha declarado también como un contenedor de cuadrícula con 2 filas. Tenga en cuenta que hemos declarado una altura fija para cada tarjeta.

191125 transiciones css 003

Paso #5. - El duende de la imagen

Según W3Schools, un sprite de imagen es una colección de imágenes puestas en una sola imagen. Ahorras ancho de banda ya que la página no necesitará hacer una solicitud al servidor para cada imagen que tenga que cargar. Solicitará la imagen una vez y luego asignará la parte requerida de la imagen dentro del código CSS.

191125 transiciones css 004

La imagen tiene 240 px de ancho y 480 px de alto. Cada uno de los iconos cubre un área de 120x120px. Para mapear cada una de las imágenes, comenzamos en la esquina superior izquierda de la imagen con las coordenadas (0px 0px) — siguiendo el orden 'izquierda - arriba'.

De esa manera, las imágenes en la columna izquierda del sprite se encuentran en:

  • 0px 0px
  • 0px -120px
  • 0px -240px
  • 0px -360px

Estas son las imágenes que se utilizarán antes de pasar el ratón por encima.

Las imágenes en la columna derecha del sprite se encuentran en:

  • 120px 0px
  • 120px -120px
  • 120px -240px
  • 120px -360px
  • Edite el código CSS:
 .service-card span {
 display: inline-block; /* to be able to apply width and height to the element */
 }

 .icon-strategy {
 background: url(./sprite.png) 0px 0;
 width: 120px;
 height: 120px;
 }

 .icon-ui-ux-design {
 background: url(./sprite.png) 0px -120px;
 width: 120px;
 height: 120px;
 }

 .icon-development {
 background: url(./sprite.png) 0px -240px;
 width: 120px;
 height: 120px;
 }
 .icon-digital-marketing {
   background: url(./sprite.png) 0px -360px;
   width: 120px;
   height: 120px;
 }
ABRIR EN EMERGENTE
 /* LAYOUT */

 .experts {
 margin-top: 36px;
 }

 .experts h2 {
 text-align: center;
 }

 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 }

El contenedor de la tarjeta de servicio es una cuadrícula horizontal con 4 columnas. Cada tarjeta se ha declarado también como un contenedor de cuadrícula con 2 filas. Tenga en cuenta que hemos declarado una altura fija para cada tarjeta.

191125 transiciones css 003

Paso #5. - El duende de la imagen

Según W3Schools, un sprite de imagen es una colección de imágenes puestas en una sola imagen. Ahorras ancho de banda ya que la página no necesitará hacer una solicitud al servidor para cada imagen que tenga que cargar. Solicitará la imagen una vez y luego asignará la parte requerida de la imagen dentro del código CSS.

191125 transiciones css 004

La imagen tiene 240 px de ancho y 480 px de alto. Cada uno de los iconos cubre un área de 120x120px. Para mapear cada una de las imágenes, comenzamos en la esquina superior izquierda de la imagen con las coordenadas (0px 0px) — siguiendo el orden 'izquierda - arriba'.

De esa manera, las imágenes en la columna izquierda del sprite se encuentran en:

  • 0px 0px
  • 0px -120px
  • 0px -240px
  • 0px -360px

Estas son las imágenes que se utilizarán antes de pasar el ratón por encima.

Las imágenes en la columna derecha del sprite se encuentran en:

  • 120px 0px
  • 120px -120px
  • 120px -240px
  • 120px -360px
  • Edite el código CSS:
 .service-card span {
 display: inline-block; /* to be able to apply width and height to the element */
 }

 .icon-strategy {
 background: url(./sprite.png) 0px 0;
 width: 120px;
 height: 120px;
 }

 .icon-ui-ux-design {
 background: url(./sprite.png) 0px -120px;
 width: 120px;
 height: 120px;
 }

 .icon-development {
 background: url(./sprite.png) 0px -240px;
 width: 120px;
 height: 120px;
 }
 .icon-digital-marketing {
   background: url(./sprite.png) 0px -360px;
   width: 120px;
   height: 120px;
 }

191125 transiciones css 005

No está mal, ¿verdad? Agreguemos un toque cosmético para terminar esta parte con algo de relleno.

  • Edite el código CSS:
 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 padding: 0.9em 0 1.8em 0;
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 padding: 0 2.75em;
 }
ABRIR EN EMERGENTE
 .service-card-container {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 padding: 0.9em 0 1.8em 0;
 }

 .service-card {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: auto auto;
 grid-row-gap: 18px;
 justify-items: center;
 align-content: center;
 height: 320px;
 padding: 0 2.75em;
 }

191125 transiciones css 006

Paso #6. - Las transiciones CSS

La propiedad de transición CSS tiene 4 propiedades secundarias diferentes:

  • propiedad de transición (la propiedad del elemento al que se aplicará la transición)
  • duración de la transición
  • función de temporización de transición
  • transición-retraso

La abreviatura es:

transición: [propiedad de transición] [duración de transición] [función de tiempo de transición] [retraso de transición]

  • Edite el código CSS:
 /* TRANSITIONS */

 .service-card {
 transition: margin-top 0.2s ease-out, height 0.2s ease-out, background 0.2s ease-out;
 }

 .service-card:hover {
 margin-top: -5em;
 height: 25em;
 background: #006e9c;
 }


Como puede notar, es posible aplicar múltiples transiciones a diferentes propiedades de elementos, separándolas con una coma. Ninguna de estas transiciones tiene un retraso.

Para hacer que la tarjeta ruede hacia arriba, establece un margen negativo en la parte superior y agrega el valor absoluto de este margen a la altura del elemento (320px == 20em).

191125 transiciones css 008

Ahora es el momento de enfocar las imágenes y hacer que cambien con una transición.

  • Edite el código CSS:
 .icon-strategy,
 .icon-ui-ux-design,
 .icon-development,
 .icon-digital-marketing {
   transition: background 0.4s step-end;
 }

 .service-card:hover .icon-strategy {
   background: url(./sprite.png) 120px 0;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-ui-ux-design {
   background: url(./sprite.png) 120px -120px;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-development {
   background: url(./sprite.png) 120px -240px;
   width: 120px;
   height: 120px;
 }

 .service-card:hover .icon-digital-marketing {
   background: url(./sprite.png) 120px -360px;
   width: 120px;
   height: 120px;
 }

Una vez más:

  • propiedad de transición: fondo
  • transición-duración: 0.4s
  • función de temporización de transición: paso a paso

El resto es solo mapear a la coordenada exacta (detallada arriba) en el sprite de la imagen.

191125 transiciones css 009

Finalmente, apuntemos al contenedor .hidden .

  • Edite el código CSS:
 .hidden,
 .hidden a {
 transition: color 0.4s ease-out 0.2s;
 }

 .service-card:hover .hidden {
 height: auto;
 }
 .service-card:hover .hidden,
 .service-card:hover .hidden a {
 color: white;
 }

Hay dos detalles aquí para tener en cuenta:

  • La transición en el color del texto tiene un retraso de transición de 0,2 s.
  • La propiedad de altura del elemento cambia al pasar el mouse sin una transición 
191125 transiciones css 010

Las transiciones son compatibles con todos los navegadores principales.

191125 transiciones css 011

Espero que les haya gustado este ejercicio. ¡Gracias por leer!

El código se puede encontrar aquí.