🌈 Nivel 17 - Animaciones CSS

📖 Animaciones CSS

🎬 ¿Qué son las Animaciones?

Las animaciones CSS permiten que los elementos de tu página se muevan, cambien de color, tamaño, o hagan efectos geniales ¡sin necesidad de JavaScript!

💡 Dos formas de animar:

1. transition - Cambios suaves al hacer hover
2. @keyframes - Animaciones completas y repetibles

🎯 Transition (transiciones):

.boton {
    background: blue;
    transition: all 0.3s ease;
}
.boton:hover {
    background: red;
    transform: scale(1.1);
}

🎬 @keyframes (animaciones):

@keyframes rebote {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

.pelota {
    animation: rebote 1s ease infinite;
}

⚙️ Propiedades de animation:

animation-name

Nombre del @keyframes

animation-duration

Duración (ej: 2s, 500ms)

animation-timing-function

ease, linear, ease-in-out

animation-iteration-count

Repeticiones (número o infinite)

💻 Editor de Animaciones

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Animaciones Mágicas</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #faf5ff, #f3e8ff);
            min-height: 100vh;
            padding: 20px;
        }
        
        h1 { 
            text-align: center; 
            color: #9333ea;
            animation: colorChange 3s ease infinite;
        }
        
        @keyframes colorChange {
            0% { color: #9333ea; }
            33% { color: #ec4899; }
            66% { color: #06b6d4; }
            100% { color: #9333ea; }
        }
        
        .contenedor {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
            margin-top: 20px;
        }
        
        /* Caja con REBOTE */
        .caja-rebote {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #a855f7, #ec4899);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            animation: rebote 1s ease infinite;
        }
        
        @keyframes rebote {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-30px); }
        }
        
        /* Caja con GIRO */
        .caja-giro {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #3b82f6, #06b6d4);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            animation: giro 2s linear infinite;
        }
        
        @keyframes giro {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        /* Caja con LATIDO */
        .caja-latido {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #ef4444, #f97316);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            animation: latido 1s ease infinite;
        }
        
        @keyframes latido {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }
        
        /* Caja con FLOTACIÓN */
        .caja-flotar {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #22c55e, #14b8a6);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            animation: flotar 3s ease-in-out infinite;
        }
        
        @keyframes flotar {
            0%, 100% { transform: translateY(0) rotate(0); }
            50% { transform: translateY(-20px) rotate(10deg); }
        }
        
        /* Caja con TEMBLOR */
        .caja-temblar {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #f59e0b, #eab308);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            animation: temblar 0.5s ease infinite;
        }
        
        @keyframes temblar {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px) rotate(-5deg); }
            75% { transform: translateX(5px) rotate(5deg); }
        }
        
        /* Botón con TRANSITION (hover) */
        .boton-magico {
            display: block;
            width: 200px;
            margin: 30px auto;
            padding: 15px 30px;
            background: linear-gradient(135deg, #8b5cf6, #a855f7);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .boton-magico:hover {
            transform: scale(1.1) rotate(5deg);
            box-shadow: 0 10px 30px rgba(168, 85, 247, 0.4);
        }
        
        /* Etiquetas */
        .etiqueta {
            text-align: center;
            color: #6b7280;
            font-size: 0.9rem;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>🌈 Animaciones Mágicas</h1>
    
    <div class="contenedor">
        <div>
            <div class="caja-rebote">🏀</div>
            <p class="etiqueta">Rebote</p>
        </div>
        
        <div>
            <div class="caja-giro">⭐</div>
            <p class="etiqueta">Giro</p>
        </div>
        
        <div>
            <div class="caja-latido">❤️</div>
            <p class="etiqueta">Latido</p>
        </div>
        
        <div>
            <div class="caja-flotar">🎈</div>
            <p class="etiqueta">Flotar</p>
        </div>
        
        <div>
            <div class="caja-temblar">😱</div>
            <p class="etiqueta">Temblar</p>
        </div>
    </div>
    
    <button class="boton-magico">
        ✨ Pasa el mouse
    </button>
</body>
</html>

👁️ Vista Previa Animada

Animaciones CSS - ¡Dale vida a tu web!

🎬 ¿Qué son las Animaciones?

💡 Dos formas de animar:

🎯 Transition (transiciones):

🎬 @keyframes (animaciones):

⚙️ Propiedades de animation:

1. ¿Qué propiedad hace que una animación se repita para siempre?

2. ¿Qué usamos para definir los pasos de una animación?

3. ¿Qué propiedad CSS crea transiciones suaves al hacer hover?