Animar una Imagen con HTML y CSS

Doom Eternal animacion

Como seria Animar una Imagen con HTML y CSS? Hace un tiempo me pidieron crear un banner para promocionar una pagina de juegos digitales varios, y junto al pedido se me envio la imagen a usar. Con esto en mente, usa Photoshop, o como alternativa, Photopea para separar el fondo de la imagen, asi como los personajes principales, para asi poder animarlos.

Así puedes animar una imagen con HTML y CSS

Agregar las imágenes con HTML

La incorporacion de las imagenes sera simple, a cada imagen la incluiremos como fondo de los contenedores, cada uno por independiente. Ademas, como estaremos creando un banner para paginas web, vamos a encapsularlo en un vinculo, le agregaremos un llamado de accion. Sin mas aqui les dejo en codigo HTML.

<div class="gamebanner">			
        <a href="#" aria-label="Begin the hunt in game" style="width: inherit; height: inherit;">
        <div class="gamepos gamebackg"></div>
        <div class="gamepos gamemonster"></div>
        <div class="gamepos gamegun"></div>
        <div class="gametext">
            <h1>DOOM Eternal</h1>
            <p>Experience the ultimate combination of speed and power in DOOM Eternal</p>
        </div>
        </a>
    </div>

Creando el estilo CSS mas la animacion

Como comente al principio, incluiremos las imagenes como fondo de los contenedores. Ademas incluiremos la animacion que use para animar a los personajes principales.

<style>
        .gamebanner{width: 100%; height: 800px; position: relative; overflow: hidden;}
        .gamebanner .gamepos{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
        .gamebanner .gamebackg{background-image: url("images/gamebakg.jpg"); background-position: center center; background-size: cover;filter:blur(1px);}
        .gamebanner .gamemonster{background-image: url("images/gamemonster.png"); background-position: center center; background-size: cover; transform: scale3d(1.1, 1.1, 1.1); animation: scaler 20s ease-out; animation-fill-mode: forwards;animation-iteration-count: infinite;animation-direction: alternate;}
        .gamebanner .gamegun{background-image: url("images/gameguns.png"); background-position: center center; background-size: cover; transform: scale3d(1.3, 1.3, 1.3); animation: scaler 20.2s ease-out; animation-fill-mode: forwards;animation-iteration-count: infinite;animation-direction: alternate;}
        .gamebanner .gametext{position: absolute; top: 90%; left: 50%; transform: translate(-50%,-90%); margin: 0; text-align: center; width: 95%;}
        .gamebanner .gametext h1, .gamebanner .gametext p{color: white; text-shadow: 0 0 5px black; font-weight: 700;}
        .gamebanner .gametext h1{font-size: 5rem;}
        .gamebanner .gametext p{font-size: 2rem;}
        @media screen and (min-width:768px){
            .gamebanner{height: 900px;}
            .gamebanner .gametext{top: 15%; left: 95%; transform: translate(-95%, -15%); width: 40%;}
            .gamebanner .gametext h1{font-size: 5rem;}
            .gamebanner .gametext p{font-size: 2rem;}
        }
        @keyframes scaler {
            100% {
                transform: scale3d(1, 1, 1);
                opacity: 1;
                }
        }
    </style>

Aqui te dejo las imagenes para que las uses