Animaciones y transiciones

Introducción

En el bullicioso mundo de "Pet's House", un santuario virtual para los amantes de las mascotas, Taylor, un creativo diseñador web, emprende un viaje para infundir vida en el sitio web.

Este laboratorio utiliza animaciones y transiciones CSS para mejorar la experiencia del usuario, haciendo que el sitio sea informativo, atractivo y dinámico. Taylor tiene como objetivo transformar elementos estáticos en funciones interactivas que cautiven a los visitantes, guiándolos a través de un viaje inolvidable en el mundo digital del cuidado de mascotas.

Skills Graph

Elemento pseudo

En la barra de navegación de la página de mascotas, cuando se pasa el cursor sobre un elemento de navegación, aparece una línea subrayada debajo de ese elemento de navegación.

¿Debemos pensar en cómo se logra este efecto, su aparición y su ocultación?

El pseudo-elemento ::after de CSS es una herramienta poderosa que permite a los desarrolladores insertar contenido adicional o decoraciones después del contenido de un elemento seleccionado. Este método se puede utilizar para una variedad de tareas de diseño y disposición, como agregar elementos decorativos, crear separaciones claras en la disposición o insertar contenido sin modificar la estructura HTML. Aquí hay un tutorial sobre cómo utilizar el pseudo-elemento ::after de CSS.

::after es un pseudo-elemento que te permite insertar contenido adicional al final del contenido de un elemento. Este contenido es, por defecto, un elemento en línea.

selector::after {
  /* Propiedades CSS */
}

Utiliza la propiedad content para especificar el contenido que se va a insertar. Esto puede ser texto, imágenes u otras propiedades CSS.

Por ejemplo, agrega un corazón rojo después del elemento <p>:

Podemos implementar un efecto de subrayado utilizando ::after agregando lo siguiente al css:

.navigation li::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background-color: black;
}

Actualmente, nada ha cambiado en la página porque el ancho es 0. A continuación, utilizaremos :hover para lograr el efecto de subrayado cambiando el ancho a 100% cuando el cursor pasa sobre el elemento.

Clase pseudo

El selector de clase pseudo :hover de CSS se utiliza para seleccionar elementos sobre los que el puntero del mouse se posa. Esto permite a los desarrolladores proporcionar retroalimentación visual para las interacciones del usuario, como cambiar colores, tamaños o agregar animaciones, mejorando así la experiencia del usuario.

selector:hover {
  /* Propiedades CSS */
}

Por ejemplo, para cambiar el color de un elemento <button> cuando el puntero del mouse se posa sobre él, se puede utilizar el siguiente CSS:

Ahora que sabemos cómo utilizar :hover, podemos agregar lo siguiente a style.css:

.navigation li:hover::after {
  width: 100%;
}

Hasta este punto, se ha logrado que al pasar el mouse sobre los elementos de navegación aparezca el efecto de subrayado. Sin embargo, los estudiantes atentos pueden notar que el efecto de aparición del subrayado presenta una línea que desciende de manera más suave. Esto es para introducirles a otro atributo de CSS.

Transición

Las transiciones CSS te permiten agregar un efecto al cambiar de un estilo a otro, sin utilizar animaciones de Flash ni JavaScript. Puedes especificar la duración de la transición, así como la forma en que la transición ocurre a través de funciones de temporización.

La propiedad de transición CSS es un atajo para cuatro propiedades relacionadas con las transiciones:

• transition-property: Especifica el nombre de la propiedad CSS a la que se aplica el efecto de transición.
• transition-duration: Define la duración de la transición.
• transition-timing-function: Describe cómo se desarrollará la transición durante su duración.
• transition-delay: Especifica un retraso antes de que comience la transición.

Por ejemplo, el siguiente código CSS define un efecto de transición que cambia el color de fondo de un elemento de azul turquesa a rgb(145, 255, 0) en 1 segundo:

Ahora que sabemos cómo utilizar transition, podemos agregar lo siguiente a style.css:

.navigation li::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background-color: black;
  transition: width 0.3s ease;
}

Opacidad

Cuando se mueve el mouse sobre la imagen en el Área de Visualización, la imagen aumentará su transparencia y se mostrará el texto debajo de ella.

La propiedad opacity de CSS se utiliza para establecer el nivel de opacidad de un elemento. Con esta propiedad, se puede controlar la transparencia de un elemento y sus hijos, haciendo que el elemento sea completamente transparente, completamente opaco o cualquier nivel de opacidad intermedio. Los valores de opacidad van de 0 (completamente transparente) a 1 (completamente opaco). Esta propiedad es muy útil para crear efectos de desvanecimiento, enfatizar elementos interactivos o diseñar interfaces con un sentido de profundidad.

selector {
  opacity: value; /* Los valores van de 0 (completamente transparente) a 1 (completamente opaco) */
}

Ahora que sabemos cómo utilizar opacity, podemos agregar lo siguiente a style.css:

.service figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  opacity: 0;
}
.service figure:hover img {
  opacity: 0.5;
}
.service figure:hover figcaption {
  opacity: 1;
}

Se ha logrado el efecto de aumento de transparencia. A continuación, agregamos algo de suavizado a la interacción.

Transformación

La propiedad de Transformación CSS te permite rotar, escalar, inclinar o trasladar un elemento, cambiando así la forma y la posición del elemento sin afectar la disposición de la página. Esta es una herramienta poderosa para crear efectos visuales dinámicos y animaciones complejas.

La propiedad de Transformación incluye las siguientes funciones:

• rotate(): Rota un elemento, con el parámetro siendo el ángulo de rotación (por ejemplo, rotate(45deg) para una rotación de 45 grados).
• scale(): Escala un elemento, con el parámetro siendo el factor de escala (por ejemplo, scale(2) para duplicar el tamaño).
• translate(): Traslada un elemento, con los parámetros siendo las distancias para moverse a lo largo del eje X y el eje Y (por ejemplo, translate(50px, 100px) para mover 50px hacia la derecha y 100px hacia abajo).
• skew(): Inclina un elemento, con los parámetros siendo los ángulos de inclinación a lo largo del eje X y el eje Y (por ejemplo, skew(30deg, 20deg) para una inclinación de 30 grados a lo largo del eje X y una inclinación de 20 grados a lo largo del eje Y).

Por ejemplo, mueve el elemento <p> 100 píxeles hacia la derecha en el eje x.

Ahora que sabemos cómo utilizar transform, podemos agregar lo siguiente a style.css:

.service figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  opacity: 0;
  transform: translateY(100%);
  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
}
.service figure:hover figcaption {
  opacity: 1;
  transform: translateY(0%);
}

Z-Index

La propiedad z-index de CSS controla el orden de apilamiento vertical de los elementos en una página. Cuando los elementos se superponen, z-index determina cuál elemento debe aparecer por encima. Solo se puede aplicar a elementos posicionados, es decir, aquellos con un valor del atributo position de relative, absolute, fixed o sticky. El valor de z-index puede ser positivo, negativo o 0, donde valores más altos significan que el elemento se colocará encima de los elementos con valores más bajos.

selector {
  position: relative | absolute | fixed | sticky;
  z-index: number;
}

Por ejemplo, asumiendo que hay dos elementos superpuestos, podemos usar z-index para controlar cuál elemento aparece por encima:

Ahora que sabemos cómo usar z-index, podemos agregar lo siguiente a style.css:

header {
  position: fixed;
  display: flex;
  flex-direction: row;
  background-color: rgb(233, 174, 87);
  width: 100%;
  max-height: max-content;
  min-height: 1em;
  padding-top: 1%;
  padding-bottom: 1%;
  text-transform: uppercase;
  z-index: 1;
}

Implementando animaciones con keyframes

Hay una animación de desvanecimiento al entrar al sitio en la página de bienvenida.

Las animaciones CSS son una herramienta poderosa que permite a los desarrolladores crear efectos animados para los elementos de una página web sin utilizar JavaScript. Con las animaciones CSS, se puede definir una secuencia de animaciones que transiciona un elemento de un estado de estilo a otro.

Las animaciones CSS se basan principalmente en dos partes clave: la regla @keyframes y las propiedades de animación.

• Regla @keyframes: Define los keyframes en la secuencia de animación. Cada keyframe describe el estilo de la animación en un momento específico.
• Propiedades de animation: Aplica los @keyframes definidos a un selector y establece la duración, el retraso, el número de iteraciones y más para la animación.

Por ejemplo:

Ahora que sabemos cómo usar la animación, podemos agregar lo siguiente a style.css:

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.title-text {
  width: 40%;
  text-align: center;
  color: black;
  margin: auto;
  padding: 0 20px;
  animation: fade-in;
  animation-duration: 8s;
}
.box-feature.cover-image {
  animation: fade-in;
  animation-duration: 5s;
}

Resumen

En este laboratorio, Taylor aplicó con éxito animaciones y transiciones CSS al sitio web "Pet's House", creando una experiencia de usuario dinámica e interactiva. El viaje desde páginas estáticas hasta interacciones dinámicas demuestra el poder de las sutiles pistas visuales para mejorar la navegación y la participación en el sitio web. A través de animaciones y transiciones, Taylor ha hecho que el espacio digital de "Pet's House" sea más atractivo y memorable para cada visitante.