Saltar al contenido
Apuntes FS(+)

Clase 11 - CSS Transform, Transition, Animation

#curso #css #transition

1. 🔄 Transformaciones CSS (transform)

Transformaciones básicas

/* Transformaciones básicas */
.scale-element {
  transform: scale(1.5);      /* Escala uniforme */
  transform: scaleX(1.5);     /* Escala horizontal */
  transform: scaleY(0.7);     /* Escala vertical */
}


.rotate-element {
  transform: rotate(45deg);   /* Rotación en sentido horario */
  transform: rotate(-90deg);  /* Rotación en sentido antihorario */
}


.translate-element {
  transform: translateX(20px);    /* Desplazamiento horizontal */
  transform: translateY(-15px);   /* Desplazamiento vertical */
  transform: translate(20px, 15px); /* Desplazamiento en ambos ejes */
}


.skew-element {
  transform: skewX(15deg);    /* Inclinación horizontal */
  transform: skewY(10deg);    /* Inclinación vertical */
  transform: skew(15deg, 10deg); /* Inclinación en ambos ejes */
}

Combinación de transformaciones

.combined-transform {
  transform: translateX(50px) scale(1.5) rotate(45deg);
}


/* Punto de origen de la transformación */
.origin-center {
  transform-origin: center;     /* Valor por defecto */
}


.origin-corner {
  transform-origin: top left;   /* Esquina superior izquierda */
}


.origin-custom {
  transform-origin: 25px 50%;   /* Valores personalizados */
}

Transformaciones 3D

/* Transformaciones básicas 3D */
.rotate3d-element {
  transform: rotateX(45deg);    /* Rotación sobre eje X */
  transform: rotateY(45deg);    /* Rotación sobre eje Y */
  transform: rotateZ(45deg);    /* Rotación sobre eje Z (igual que rotate) */
  transform: rotate3d(1, 1, 1, 45deg); /* Rotación en los tres ejes */
}


.translate3d-element {
  transform: translateZ(50px);  /* Desplazamiento en el eje Z */
  transform: translate3d(10px, 20px, 30px); /* Desplazamiento en XYZ */
}


.perspective-container {
  /* Establece la profundidad de perspectiva */
  perspective: 1000px;
}


.perspective-element {
  /* Aplica perspectiva al elemento mismo */
  transform: perspective(1000px) rotateY(45deg);
}

Transformaciones con variables CSS

:root {
  --rotation-amount: 45deg;
  --scale-factor: 1.2;
  --translate-distance: 20px;
}


.dynamic-transform {
  transform: rotate(var(--rotation-amount))
             scale(var(--scale-factor))
             translateY(var(--translate-distance));
  transition: transform 0.3s ease;
}

2. 🔄 Transiciones CSS

/* Sintaxis básica */
.element {
  transition-property: property;
  transition-duration: time;
  transition-timing-function: function;
  transition-delay: time;
}


/* Shorthand */
.element {
  transition: property time function delay-time;
}


/* Ejemplo práctico */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  transition: background-color 0.3s ease, transform 0.2s ease-out;
}


.button:hover {
  background-color: darkblue;
  transform: scale(1.05);
}

Propiedades de transition

/* Propiedades comunes para transiciones */
transition-property: all | none | property1, property2, ...;
transition-duration: 0.3s | 200ms | ...;
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
transition-delay: 0s | 0.5s | ...;

Timing functions

/* Funciones de temporización comunes */
.element1 { transition-timing-function: ease; } /* Por defecto */
.element2 { transition-timing-function: linear; } /* Velocidad constante */
.element3 { transition-timing-function: ease-in; } /* Inicio lento, final veloz */
.element4 { transition-timing-function: ease-out; } /* Inicio veloz, final lento */
.element5 { transition-timing-function: ease-in-out; } /* Initio y final lento, veloz en la mitad */
.element6 { transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); } /* Custom */

3. ✨ Animaciones CSS

Definición con @keyframes

/* Sintaxis de @keyframes */
@keyframes animation-name {
  0% {
    /* Initial styles */
  }
  50% {
    /* Intermediate styles */
  }
  100% {
    /* Final styles */
  }
}


/* Aplicación de la animación */
.element {
  animation-name: animation-name;
  animation-duration: time;
  animation-timing-function: function;
  animation-delay: time;
  animation-iteration-count: number | infinite;
  animation-direction: normal | reverse | alternate | alternate-reverse;
  animation-fill-mode: none | forwards | backwards | both;
  animation-play-state: running | paused;
}


/* Shorthand */
.element {
  animation: animation-name duration function delay iterations direction fill-mode play-state;
}


/* Ejemplo práctico */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}


.heart {
  animation: pulse 1.5s ease-in-out infinite;
}

Propiedades de animation

/* Propiedades detalladas */
animation-name: pulse | slide | ...;
animation-duration: 1s | 300ms | ...;
animation-timing-function: ease | linear | ease-in | ease-out | cubic-bezier(...);
animation-delay: 0s | 0.5s | ...;
animation-iteration-count: 1 | 3 | infinite;
animation-direction: normal | reverse | alternate | alternate-reverse;
animation-fill-mode: none | forwards | backwards | both;
animation-play-state: running | paused;

4. 🔄 View Transitions en Astro

Ventajas sobre las transiciones tradicionales:

  • Simplifican la creación de transiciones complejas entre estados completos de la UI
  • Mantienen la continuidad visual durante los cambios de estado
  • Mejoran la experiencia de usuario al proporcionar feedback visual durante la navegación
  • Se integran perfectamente con frameworks modernos y herramientas como Astro

En Astro, las View Transitions se implementan de forma nativa y sencilla, permitiendo crear experiencias de navegación fluidas con un mínimo de código.

Visitar web View Transitions con Astro

5. 🔍 Casos de uso y ejemplos prácticos

Ejemplos de transiciones

/* Transición de hover para tarjetas */
.card {
  width: 300px;
  height: 200px;
  background-color: #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 20px rgba(0,0,0,0.2);
  background-color: #ffffff;
}


/* Transición para menú móvil */
.mobile-menu {
  transform: translateX(-100%);
  transition: transform 0.4s ease-in-out;
}


.mobile-menu.open {
  transform: translateX(0);
}


/* Transición para mostrar tooltip */
.tooltip {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}


.element:hover .tooltip {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

Ejemplos de animaciones

/* Animación de carga */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.loader {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #3498db;
  animation: spin 1s ease-in-out infinite;
}


/* Animación de entrada escalonada para lista */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


.animated-list li {
  opacity: 0;
  animation: fadeIn 0.5s ease-out forwards;
}


.animated-list li:nth-child(1) { animation-delay: 0.1s; }
.animated-list li:nth-child(2) { animation-delay: 0.2s; }
.animated-list li:nth-child(3) { animation-delay: 0.3s; }
.animated-list li:nth-child(4) { animation-delay: 0.4s; }


/* Animación de notificación */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}


.new-notification {
  animation: blink 1s ease infinite;
}

6. 🛠️ Mejores prácticas y consideraciones

Para transiciones

  • Rendimiento: Prioriza propiedades que el navegador puede optimizar (transform, opacity)
/* Recomendado */
.element {
  transition: transform 0.3s ease, opacity 0.3s ease;
}


/* Evitar (causa reflow) */
.element {
  transition: width 0.3s ease, height 0.3s ease, top 0.3s ease;
}
  • Duración: Mantén transiciones cortas para interfaces responsivas
/* Recomendado */
.element { transition-duration: 200ms; } /* Feedback inmediato */
.element { transition-duration: 300ms; } /* Transición estándar */
.element { transition-duration: 500ms; } /* Transición destacada */


/* Evitar */
.element { transition-duration: 2s; } /* Demasiado lento */

Para animaciones

  • Nombres semánticos: Utiliza nombres descriptivos para tus keyframes
/* Recomendado */
@keyframes fadeInFromLeft { ... }
@keyframes pulseNotification { ... }


/* Evitar */
@keyframes anim1 { ... }
@keyframes myAnimation { ... }

Ejercicios

Ejercicio 1: Estilización de Hoja de Vida con CSS

Objetivo: Aplicar reglas de CSS a la hoja de vida desarrollada en las clases anteriores de HTML.

Requisitos:

  • Utilizar archivos .astro y el CSS dentro de la etiqueta style.
  • Implementar las propiedades CSS vistas hasta la clase 11.

Ejercicio 2: Exploración de Gradientes y Fondos

Objetivo: Investigar y aplicar diferentes tipos de gradientes y propiedades de fondo en CSS.

Requisitos:

  • Crear una página que muestre al menos:
    • 3 ejemplos de gradientes lineales (linear-gradient)
    • 2 ejemplos de gradientes radiales (radial-gradient)
    • 1 ejemplo de gradiente cónico (conic-gradient)
  • Implementar las siguientes propiedades de background:
    • background-image
    • background-size (usar cover, contain y valores específicos)
    • background-position
    • background-repeat
    • background-attachment (fixed, scroll)
  • Incluir una sección con múltiples capas de fondo (múltiples background-image)

Ejercicio 3: Creación de Animaciones CSS

Objetivo: Diseñar e implementar tres animaciones diferentes utilizando CSS.

Requisitos:

  • Desarrollar las siguientes animaciones:

    1. Animación de transformación: Crear una animación que combine scale, rotate y translate
    2. Animación de cambio de propiedades: Implementar una animación que modifique colores, opacidad y/o dimensiones
    3. Animación compleja: Desarrollar una animación que combine múltiples propiedades y utilice diferentes tiempos y funciones de tiempo

  • Cada animación debe:

    • Utilizar la regla @keyframes
    • Implementar animation-duration, animation-timing-function y animation-iteration-count
    • Incluir al menos una propiedad animation-direction diferente a normal