Mi primera animación en CSS

Mejora tu Desarrollo Front-End

¿Os habéis preguntado alguna vez cómo se crean esas animaciones tan geniales en los sitios web modernos?

Yo sí, y recientemente me picó la curiosidad mientras observaba a mis compañeros de Fidenet trabajar en animaciones en CSS. Les pedí ayuda para hacer mi primera animación, ¡y fue una experiencia top! Si compartes mi pasión por el aprendizaje constante, te invito a unirte a mí en este viaje de descubrimiento. Lo primero que tenemos que saber es qué es CSS.

¿Qué es CSS?

CSS es como la «ropa» de una página web. Así como tú eliges tu ropa para lucir bien y expresar tu estilo, CSS se encarga de vestir a una página web para que se vea atractiva y tenga un diseño agradable.

Imagina una página web como una estructura, donde se colocan elementos como textos, imágenes y botones. Sin CSS, esa página se vería muy básica, como una carta en el block de notas sin diseño. CSS le añade estilo y apariencia, como ponerle un traje elegante o un vestido bonito a esa página. Con CSS, puedes cambiar el color de los textos, el tamaño de las fuentes, la disposición de los elementos, los colores de fondo y muchas otras cosas para vestirla como quieras

Antes de entrar en las Animaciones en CSS me gustaría contaros 5 cosas sencillas que aprendí de mis compañeros hace unos días:

1. Cambiar el color del texto:

   

2. Cambiar el tamaño de la fuente:

   

3. Cambiar tipografía:

   

4. Agregar un fondo de color:

   

5. Agregar una imagen de fondo:

   

Diferencias Entre Transiciones y Animaciones en CSS

Mis compis me prepararon una clase práctica, que hoy os quiero plasmar en forma de tutorial, para que vayáis aprendiendo conmigo poco a poco. Su primera pregunta fue: 

¿Quieres crear una animación en CSS o una transición en CSS?

Antes de comenzar, es importante entender la diferencia entre las transiciones y las animaciones en CSS.

Transiciones en CSS

Las transiciones son como esos sutiles cambios que ocurren cuando pasas el cursor sobre un botón, como una flecha que se convierte en un cuadrado negro. Puedes ver un  ejemplo práctico de esto cuando pasas el cursor sobre un botón y la flecha se transforma en un cuadrado negro mediante propiedades como translate y transform.

Animaciones en CSS

Por otro lado, las animaciones CSS son aún más versátiles y emocionantes. Requieren tres elementos clave: un elemento HTML que deseas animar, una declaración CSS que define la animación y un conjunto de keyframes que especifican el inicio y el final de la animación. Observa un ejemplo en el que las letras de un SVG se mueven y cambian utilizando la propiedad stroke-dashoffset en función del tiempo. La creatividad no tiene límites con las animaciones en CSS.

Ejemplo de animaciones en CSS más complejos

Las animaciones CSS pueden ser sorprendentemente complejas y creativas. Desde camiones que recorren un paisaje natural con efectos parallax hasta letras de un SVG que se mueven y cambian con el tiempo, las posibilidades son infinitas. Estas animaciones pueden dar vida a una página web y mejorar la experiencia del usuario de maneras asombrosas. ¡Quizás más adelante cuando vaya aprendiendo os preparo otro post con un tutorial más complejo!

Ahora vamos a lo interesante, ¿Qué os parece si creamos una animación de texto? Aquí os dejo un pequeño tutorial que lo hemos creado con nuestro equipo de desarrolladores:

Creando una animación en CSS

1. Paso 1: Introducción

   En el siguiente tutorial, te enseñaremos cómo crear una animación de texto utilizando exclusivamente HTML y CSS. El propósito de esta animación es lograr que las palabras se presenten y desvanezcan en una secuencia dinámica y atractiva.

2. Paso 2: Estructura HTML

   En primer lugar, configuraremos la estructura HTML que albergará nuestro texto animado. Utilizaremos una etiqueta con la clase .rotatingText y añadiremos un div con la clase .rotatingText-content. Dentro de este bloque, incluimos un párrafo con la clase .rotatingText-description que contendrá el texto de introducción, así como tres encabezados h2 con la clase .rotatingText-adjective, los cuales representarán las palabras que se mostrarán y desvanecerán de manera secuencial.

    
   <section class="rotatingText">
   	<div class="rotatingText-content">
   	  <p class="rotatingText-description">
   		En Fidenet hacemos webs&hellip;
   	  </p>
   	  <h2 class="rotatingText-adjective">bonitas</h2>
   	  <h2 class="rotatingText-adjective">usables</h2>
   	  <h2 class="rotatingText-adjective">accesibles</h2>
   	  <h2 class="rotatingText-adjective">únicas</h2>
   	  <h2 class="rotatingText-adjective">perfectas :mano_con_signo_de_aprobación:</h2>
   	</div>
   </section>
    
   

3. Paso 3: Incluir el enlace del archivo CSS

   Dentro de la sección head de tu archivo HTML, es fundamental agregar una etiqueta link que enlace tu archivo CSS. Esto le indica al navegador que debe cargar los estilos desde el archivo CSS independiente. La estructura de la etiqueta link se muestra a continuación:

   En este ejemplo, el atributo href de la etiqueta link debe apuntar a la ubicación de tu archivo CSS. Es crucial asegurarse de que tanto el archivo HTML como el archivo CSS se encuentren en la misma carpeta o ajustar la ruta según sea necesario para garantizar que los estilos se apliquen adecuadamente.

   <!DOCTYPE html>
   <html>
   <head>
     <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
   <body>
        <section class="rotatingText">
     <div class="rotatingText-content">
       <p class="rotatingText-description">
         En Fidenet hacemos webs&hellip;
       </p>
       <h2 class="rotatingText-adjective">bonitas</h2>
       <h2 class="rotatingText-adjective">usables</h2>
       <h2 class="rotatingText-adjective">accesibles</h2>
       <h2 class="rotatingText-adjective">únicas</h2>
       <h2 class="rotatingText-adjective">perfectas :mano_con_signo_de_aprobación:</h2>
     </div>
        </section>
   </body>
   </html>

4. Paso 4: Estilos CSS

   A continuación, procederemos a definir las clases CSS que otorgarán estilos y animaciones a nuestros elementos.

   • La clase .rotatingText será aplicada al contenedor principal y se encargará de la alineación y la presentación general del conjunto.

   • La clase .rotatingText-content se empleará para el contenido dentro del contenedor, definiendo su posición y ancho.

   • La clase .rotatingText-description será utilizada para estilizar el texto de introducción.

   • La clase .rotatingText-adjective se aplicará a las palabras que se animarán. Estas reglas establecerán la fuente, el tamaño, la posición y las animaciones de las palabras.

5. Paso 5: Animaciones CSS

   En este paso, definimos dos animaciones CSS que se aplicarán a los elementos con la clase .rotatingText-adjective. La primera animación, rotate-text-up, hace que las palabras aparezcan desde abajo y se desplacen hacia arriba antes de desaparecer. La segunda animación, fade-text-in, hace que las palabras aparezcan gradualmente con una transición de opacidad.

6. Paso 6: Resultado final

Después de seguir los pasos anteriores, habrás creado una animación de texto atractiva utilizando solo HTML y CSS. Las palabras aparecerán y desaparecerán en una secuencia animada, lo que puede ser útil para resaltar características o mensajes importantes en tu sitio web.  

Aquí tienes el código completo de CSS que se explicó en los pasos anteriores. 

  
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');

* {
  margin: 0;
  padding: 0;
}

.rotatingText {
    align-items: center;
    display: flex;
    height: 100vh;
    text-align: center;
    background: #FF7F22;
  }
 
  .rotatingText-content {
    position: relative;
    width: 100%;
  }
 
  .rotatingText-description {
    font-family: 'Oswald', san-serif;
    font-style: italic;
    font-size: 14px;
    margin: 0;
   
    @media (min-width: 768px) {
      font-size: 18px;
    }
  }
 
  .rotatingText-adjective {
    font-family: 'Oswald', san-serif;
    font-size: 40px;
    left: 0;
    margin-bottom: 0;
    margin-top: 30px;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: center;
    text-transform: uppercase;
    top: 0;
   
    @media (min-width: 768px) {
      font-size: 70px;
    }
   
    &:nth-of-type(1) {
      animation: rotate-text-up 1.5s .75s;
    }
   
    &:nth-of-type(2) {
      animation: rotate-text-up 1.5s 2s;
    }  
   
    &:nth-of-type(3) {
      animation: rotate-text-up 1.5s 3.25s;
    }


    &:nth-of-type(4) {
      animation: rotate-text-up 1.5s 4.55s;
    }  
   
    &:nth-of-type(5) {
      animation: fade-text-in 1.5s 5.75s forwards;
    }
  }
 
  @keyframes rotate-text-up {
    0% {
      transform: translate3d(0, 80px, 0);
      opacity: 0;
    }
20%, 80% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
   
    100% {
      transform: translate3d(0, -40px, 0);
      opacity: 0;
    }
  }
 
  @keyframes fade-text-in {
    0% {
      opacity: 0;
      transform: translate3d(0, 80px, 0);
    }
   
    50%, 100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }



  

Después de explicarte cómo crear esta animación en CSS, me gustaría compartir contigo algunos consejos valiosos que recibí de los desarrolladores de Fidenet: bibliotecas, frameworks de animación, recursos y herramientas. 

Librerías y Frameworks de Animación

Para simplificar y potenciar la creatividad en tus animaciones en CSS, existen varias librerías y frameworks que te brindan soluciones predefinidas para diferentes tipos de animaciones. Algunas de las opciones más destacadas incluyen:

1. Animate

   Ofrece una amplia gama de animaciones listas para usar que facilitan la incorporación de efectos atractivos a tu sitio web.

2. Animista

   Esta herramienta te permite personalizar y ajustar animaciones CSS según tus necesidades específicas.

3. Aos

   Un framework de animación en scroll que agrega un toque especial a tu contenido mientras los usuarios se desplazan por la página.

4. Animxyz

   Con una colección de animaciones únicas, Animxyz te permite destacar y cautivar a tu audiencia.

5. Reshake

   Ideal para crear animaciones de vibración y efectos temblorosos que pueden ser perfectos para ciertos proyectos creativos.

Recursos y Herramientas

¿Te sientes inspirado para crear tus propias animaciones? ¡Genial! Hay herramientas online como Keyframes.app que simplifican el proceso, eliminando la necesidad de escribir código manualmente. Además, puedes profundizar en tus conocimientos de CSS explorando recursos educativos como The Magic of CSS o CSS Reference.

¿Seréis capaces de animar los textos de vuestra web?

Si no eres capaz, o prefieres que lo haga un especialista, en Fidenet tenemos desarrolladores que son capaces de hacer maravillas que harán que tu web sea única.

En resumen, las transiciones CSS y las animaciones web desempeñan un papel crucial en el diseño de experiencias de usuario. Estas técnicas pueden hacer que una aplicación se sienta más "real", proporcionar retroalimentación efectiva y aumentar la alegría general de la experiencia del usuario. A pesar de su profundidad y complejidad, dominar estas herramientas es esencial para el éxito en el desarrollo front-end.

Etapa 1 de mi viaje hacia la cima del desarrollo Front-End

¡Esto es solo el comienzo de mi viaje de aprendizaje en CSS y desarrollo front-end! Si quieres unirte a mí y aprender juntos, estad atentos a futuros posts donde exploraremos nuevas técnicas y trucos en el emocionante mundo del desarrollo front-end. ¡Aprender nunca ha sido tan divertido!

Si has llegado hasta aquí es porque, por un motivo u otro, te interesa el tema que hemos tratado en esta entrada.
¿Tienes un proyecto en mente? ¿Quieres saber más sobre este u otros aspectos?
¿Por qué no nos lo cuentas? ¡El futuro te puede estar esperando al otro lado de este formulario!

¡Hola! ¿Cómo quieres que nos refiramos a ti? *

Déjanos por aquí un email para poder contactar contigo. *

Queremos saber más de ti. ¿Qué te ha traído hasta aquí? ¿En qué podemos ayudarte? Te leemos.

He leído y acepto la Política de Privacidad.

Este sitio está protegido por reCAPTCHA y se aplica la política de privacidad y los términos del servicio de Google.

• 
• 
• 
• 

¿Te ha gustado este artículo de noticias?

Seguro que alguno de estos te va a interesar…

Blog 6 tendencias para 2024 en Marketing y Tecnología

Blog Comparativa de los ERPs más usados.

Blog Gestión de proyectos con Odoo: Una guía paso a paso