html, body {
  height: 100%; 
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center; 

  background-image: url("wano.avif"); 
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.container {
    position: relative;
}
.fourth-gear {
    width: 249px;
    height: 212px;

    background-image: url("gear4x.png"); 
    background-repeat: no-repeat;
    background-position: 0 0;
    animation: shoot 1s steps(1) infinite;
    }

@keyframes shoot {
  /* Frame 1 */
    0% {
        background-position: 0 0;
        width: 95px;
    }

    /* Frame 2 */
    20% {
        background-position: -95px 0;
        width: 163px;
    }

    /* Frame 3 */
    40% {
        background-position: -258px 0;
        width: 212px;
    }

    /* Frame 4 */
    60% {
        background-position: -470px 0;
        width: 226px;
    }

    /* Frame 5 */
    80% {
        background-position: -696px 0;
        width: 249px;
    }

    /* Loop back to Frame 1 */
    100% {
        background-position: 0 0;
        width: 95px;
    }
}