Animación de Cambio de Imágenes con CSS ~ Tutorialazo

Read Time:2 Minute, 57 Second

¿Quieres agregar una animación visualmente atractiva a tu sitio web sin usar JavaScript? Hoy te mostraré cómo crear una transición de imágenes completamente con CSS, usando @keyframes y la propiedad background-image. Este método es ideal para crear carruseles de imágenes o fondos animados en una página web.

¿Qué aprenderás en este tutorial?

Cómo usar CSS para crear una animación de deslizamiento entre varias imágenes.
Aplicar efectos visuales usando box-shadow para darle profundidad al contenedor.
Utilizar @keyframes para controlar las transiciones de imágenes de forma suave y sin complicaciones.

Código HTML y CSS

Aquí te dejo el código completo que puedes copiar y pegar directamente en tu proyecto.

HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animación de Imágenes con CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="div"></div>
</body>
</html>

CSS:

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #636a77; /* Fondo neutro para destacar el contenedor */
}

.div {
    width: 600px;
    height: 400px;
    background-size: cover; /* Asegura que la imagen cubra el contenedor */
    background-position: center; /* Centra la imagen dentro del contenedor */
    box-shadow: 20px 20px 10px gray; /* Sombra alrededor del contenedor */
    animation: slider 10s linear infinite; /* Animación suave e infinita */
}

@keyframes slider {
    0% { background-image: url('https://tutorialazo.com/wp-content/uploads/2024/10/Haunted-Halloween-mansion-with-shattered-windows-and-overgrown-vines.jpg'); }
    25% { background-image: url('https://tutorialazo.com/wp-content/uploads/2024/10/Spooky-Halloween-Background-4K-night-with-skeletons-dancing-in-the-moonlight-scaled.jpg'); }
    50% { background-image: url('https://tutorialazo.com/wp-content/uploads/2024/10/Halloween-zombie-rising-from-the-ground-in-a-dark-forest-Spooky-Background-scaled.jpg'); }
    75% { background-image: url('https://tutorialazo.com/wp-content/uploads/2024/10/Halloween-Wallpaper-4K-Free-Download-scaled.jpg'); }
    100% { background-image: url('https://tutorialazo.com/wp-content/uploads/2024/10/Spooky-Halloween-Background-with-twisted-trees-and-glowing-eyes-in-the-forest-scaled.jpg'); }
}

¿Cómo funciona este código?

Centrado del contenido: Usamos Flexbox en el body para centrar el contenedor tanto horizontal como verticalmente en la página. Esto asegura que el contenedor con las imágenes siempre esté perfectamente alineado en el medio de la pantalla.
Contenedor .div:
- background-size: cover;: Ajusta la imagen de fondo para que cubra completamente el contenedor.
- box-shadow: Aplica una sombra alrededor del contenedor para darle un efecto 3D que lo hace resaltar.
- animation: slider 10s linear infinite;: Aplica la animación definida en @keyframes que dura 10 segundos, de manera lineal y se repite infinitamente.
Animación con @keyframes: La animación definida con @keyframes cambia las imágenes de fondo del contenedor en diferentes intervalos:
- En el 0% de la animación, se muestra la primera imagen.
- En el 25%, aparece la segunda imagen.
- En el 50%, se cambia a la tercera imagen.
- En el 75%, se muestra la cuarta imagen.
- Finalmente, en el 100%, aparece la quinta imagen antes de repetir el ciclo.

Personalización

Este código es completamente personalizable. Aquí algunas ideas para ajustarlo a tu gusto:

Cambia las imágenes: Simplemente reemplaza las URLs de las imágenes en @keyframes con las tuyas propias.
Modifica el tiempo de la animación: Si prefieres que la animación sea más rápida o más lenta, ajusta el valor de 10s en animation: slider 10s linear infinite.
Añade más imágenes: Puedes agregar más etapas en los @keyframes para añadir más imágenes a la rotación.