En este tutorial aprenderás a crear animaciones fluidas y atractivas utilizando solo CSS puro. No necesitas JavaScript ni librerías externas. Exploraremos transitions y keyframes para dar vida a tus elementos web. Ideal para principiantes y avanzados que quieran optimizar rendimiento.
Requisitos previos
- Conocimientos básicos de HTML y CSS.
- Un editor de código como VS Code.
- Navegador moderno (Chrome, Firefox, etc.).
Paso 1: Estructura HTML básica
Crea un archivo index.html con un elemento simple para animar, como un botón.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Animaciones CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="btn-animado">Clic para animar</button>
</body>
</html>Paso 2: Transiciones suaves con CSS Transitions
Las transiciones permiten cambios suaves en propiedades como background-color, transform o opacity al hacer hover.
/* styles.css */
.btn-animado {
padding: 15px 30px;
font-size: 18px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.btn-animado:hover {
background-color: #2980b9;
transform: scale(1.1) rotate(5deg);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}Prueba pasando el mouse: ¡el botón se agranda y rota suavemente!
Paso 3: Animaciones complejas con @keyframes
Para animaciones infinitas, como un spinner, usa @keyframes.
.spinner {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
animation: girar 1s linear infinite;
}
@keyframes girar {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}Agrega <div class="spinner"></div> a tu HTML para verlo en acción.
Paso 4: Animaciones avanzadas con múltiples keyframes
- Define varios puntos en
@keyframespara rebotes o pulsos. - Usa
animation-timing-functionpara curvas personalizadas.
@keyframes rebote {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
.rebote {
animation: rebote 2s infinite;
}Consejos para optimizar animaciones
- Usa
transformyopacity(acelerados por GPU). - Evita animar
width,heighto propiedades de layout. - Prueba en DevTools Performance.
¡Experimenta y crea tus propias animaciones! Comparte tus resultados en los comentarios. Código completo en GitHub.
¿Quieres comentar?
Inicia sesión con Telegram para participar en la conversación