Animaciones CSS

Animaciones CSS Configuración

Animaciones Básicas CSS Paso 1

Transiciones

.boton {
background-color: #3498db;
color: white;
padding: 10px 20px;
border-radius: 5px;
transition: all 0.3s ease;
}

.boton:hover {
background-color: #2980b9;
transform: scale(1.1);
}

Keyframes

@keyframes fadeIn {
from {
  opacity: 0;
  transform: translateY(20px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}

.elemento-animado {
animation: fadeIn 0.5s ease-out forwards;
}

Animate.css Paso 2

Instalación

npm install animate.css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

Uso Básico

<!-- HTML -->
<div class="animate__animated animate__fadeIn">
Contenido con fade in
</div>

<div class="animate__animated animate__bounce">
Contenido que rebota
</div>

<!-- JavaScript -->
element.classList.add('animate__animated', 'animate__fadeIn');

Personalización

/* Duración */
.elemento {
--animate-duration: 2s;
}

/* Retardo */
.elemento {
--animate-delay: 0.5s;
}

/* Repetición */
.elemento {
--animate-repeat: 2;
}

GSAP (GreenSock) Paso 3

Instalación

npm install gsap

Animaciones Básicas

// Importar GSAP
import gsap from 'gsap';

// Animación básica
gsap.to(".elemento", {
duration: 1,
x: 100,
y: 50,
rotation: 360,
scale: 1.5,
opacity: 0.5
});

// Timeline
const tl = gsap.timeline();

tl.to(".elemento1", { duration: 1, x: 100 })
.to(".elemento2", { duration: 1, y: 100 })
.to(".elemento3", { duration: 1, rotation: 360 });

Scroll Trigger

// Importar ScrollTrigger
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

// Animación al hacer scroll
gsap.to(".elemento", {
scrollTrigger: {
  trigger: ".elemento",
  start: "top center",
  end: "bottom center",
  scrub: true,
  markers: true
},
y: 100,
opacity: 0
});

Framer Motion (React) Paso 4

Instalación

npm install framer-motion

Componentes Animados

import { motion } from 'framer-motion';

// Animación básica
function Componente() {
return (
  <motion.div
    initial={{ opacity: 0, y: 20 }}
    animate={{ opacity: 1, y: 0 }}
    transition={{ duration: 0.5 }}
  >
    Contenido animado
  </motion.div>
);
}

// Animación con variantes
const variants = {
hidden: { opacity: 0, x: -100 },
visible: { opacity: 1, x: 0 }
};

function ComponenteConVariantes() {
return (
  <motion.div
    variants={variants}
    initial="hidden"
    animate="visible"
    transition={{ duration: 0.5 }}
  >
    Contenido animado
  </motion.div>
);
}

Optimización y Rendimiento Paso 5

CSS

/* Usar propiedades optimizadas */
.elemento {
/* ✅ Bueno - Usa transform */
transform: translateX(100px);

/* ❌ Malo - Evitar */
left: 100px;
}

/* Usar will-change con moderación */
.elemento {
will-change: transform;
}

JavaScript

// Usar requestAnimationFrame
function animar() {
requestAnimationFrame(() => {
  elemento.style.transform = `translateX(${posicion}px)`;
});
}

// Debounce para eventos de scroll
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
  const later = () => {
    clearTimeout(timeout);
    func(...args);
  };
  clearTimeout(timeout);
  timeout = setTimeout(later, wait);
};
}

Mejores Prácticas Recomendado

1. Accesibilidad

/* Reducir el movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
.elemento-animado {
  animation: none;
  transition: none;
}
}

/* JavaScript */
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
// Desactivar o simplificar animaciones
}

2. Rendimiento

// ✅ Bueno: Animar propiedades de transform y opacity
gsap.to(elemento, {
  transform: 'translateX(100px)',
  opacity: 0.5
});

// ❌ Malo: Evitar animar width, height o left
gsap.to(elemento, {
  width: '200px',
  height: '200px'
});

3. Organización

export const fadeIn = {
initial: { opacity: 0, y: 20 },
animate: { opacity: 1, y: 0 },
transition: { duration: 0.5 }
};

export const slideIn = {
initial: { x: -100 },
animate: { x: 0 },
transition: { duration: 0.3 }
};

// Uso
import { fadeIn } from './animations/config';

<motion.div {...fadeIn}>
Contenido
</motion.div>

🐝