✨ Nivel 10 - Animaciones CSS

📖 Animaciones CSS

✨ ¿Qué son las animaciones?

Las animaciones CSS permiten que los elementos se muevan, cambien de color, tamaño y mucho más. ¡Hacen que tu página cobre vida!

💡 Transition vs Animation

transition: Cambio suave entre dos estados (ej: hover)

animation: Movimiento continuo con @keyframes

🎬 Ejemplos de animaciones:

Rotar

Escalar

Pulso

Temblar

Rebotar

Color

📝 Sintaxis de @keyframes:

@keyframes nombreAnimacion {
    0%   { /* estado inicial */ }
    50%  { /* estado intermedio */ }
    100% { /* estado final */ }
}

.elemento {
    animation: nombreAnimacion 2s ease infinite;
}

⚙️ Propiedades de animation:

animation-name - Nombre de @keyframes
animation-duration - Duración (ej: 2s)
animation-timing-function - ease, linear, etc.
animation-iteration-count - Veces o infinite
animation-direction - normal, reverse, alternate

💻 Editor de Animaciones

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Animaciones CSS</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #0c4a6e, #164e63);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 30px;
            padding: 20px;
        }
        
        h1 {
            color: white;
            text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
        }
        
        /* 🎯 Animación de entrada */
        @keyframes entradaEstrella {
            0% {
                transform: scale(0) rotate(-180deg);
                opacity: 0;
            }
            50% {
                transform: scale(1.2) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: scale(1) rotate(0deg);
                opacity: 1;
            }
        }
        
        .estrella {
            font-size: 4rem;
            animation: entradaEstrella 1s ease forwards;
        }
        
        /* 🔄 Animación de rotación */
        @keyframes girar {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .planeta {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #3b82f6, #06b6d4);
            border-radius: 50%;
            animation: girar 3s linear infinite;
            box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
        }
        
        /* 💓 Animación de latido */
        @keyframes latido {
            0%, 100% { transform: scale(1); }
            25% { transform: scale(1.1); }
            50% { transform: scale(1); }
            75% { transform: scale(1.2); }
        }
        
        .corazon {
            font-size: 3rem;
            animation: latido 1s ease infinite;
        }
        
        /* 🌈 Animación de arcoíris */
        @keyframes arcoiris {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .caja-arcoiris {
            padding: 20px 40px;
            background: linear-gradient(90deg, 
                #ff0000, #ff8000, #ffff00, 
                #00ff00, #00ffff, #0000ff, #ff00ff);
            background-size: 400% 400%;
            border-radius: 15px;
            color: white;
            font-weight: bold;
            font-size: 1.5rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            animation: arcoiris 3s ease infinite;
        }
        
        /* ✨ Botón con hover */
        .boton-magico {
            padding: 20px 40px;
            background: #06b6d4;
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1.3rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 20px rgba(6, 182, 212, 0.4);
        }
        
        .boton-magico:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 15px 40px rgba(6, 182, 212, 0.6);
            background: #0891b2;
        }
    </style>
</head>
<body>
    <h1>✨ Animaciones CSS</h1>
    
    <div class="estrella">⭐</div>
    
    <div class="planeta"></div>
    
    <div class="corazon">❤️</div>
    
    <div class="caja-arcoiris">🌈 Arcoíris Animado</div>
    
    <button class="boton-magico">
        ✨ ¡Pasa el mouse aquí!
    </button>
</body>
</html>

👁️ Vista Previa

Animaciones y Transiciones CSS

✨ ¿Qué son las animaciones?

💡 Transition vs Animation

🎬 Ejemplos de animaciones:

Rotar

Escalar

Pulso

Temblar

Rebotar

Color

📝 Sintaxis de @keyframes:

⚙️ Propiedades de animation:

🎛️ Controles de Animación

1. ¿Qué regla se usa para definir los pasos de una animación?

2. ¿Qué valor hace que una animación se repita para siempre?

3. ¿Qué propiedad crea un cambio suave al pasar el mouse (hover)?