<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CSS (Crazy)</title>
  <link rel="stylesheet" href="./index.css" />
  <style>

  </style>
</head>

<body>
  <div id="progress">
    <span>
      <img src="https://i.postimg.cc/DvVNb6n2/tiles-10x9-0.png?dl=1" alt="" />
    </span>
  </div>
</body>

</html>
:root {
  --base-speed-dashoffset: 7600ms;
  --base-speed-stroke: 6000ms;
  --speed: 5;

  --speed-dashoffset: calc(var(--base-speed-dashoffset) / var(--speed));
  --speed-stroke: calc(var(--base-speed-stroke) / var(--speed));
}

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 8px;
  overflow: hidden;
  box-sizing: border-box;
}

#progress {
  display: block;
  width: 100%;
  padding-bottom: 100%;
  position: relative;
}

#progress > span {
  --speed-position: calc(900ms / (var(--speed) / 1.5));
  position: absolute;
  display: block;
  top: 50vh;
  left: 50%;
  width: calc(1280px / 10);
  height: calc(1134px / 9);
  overflow: hidden;
  transform: translate(-50%, -50%);
}

#progress > span > img {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  animation: translate calc(var(--speed-position) * 9) steps(10) infinite;
}

@keyframes translate {
  0% {
    transform: translate(0px, 0px);
  }
  11.11% {
    transform: translate(-1280px, 0px);
  }

  11.12% {
    transform: translate(0, -126px);
  }
  22.22% {
    transform: translate(-1280px, -126px);
  }

  22.23% {
    transform: translate(0, -252px);
  }
  33.33% {
    transform: translate(-1280px, -252px);
  }

  33.34% {
    transform: translate(0, -378px);
  }
  44.44% {
    transform: translate(-1280px, -378px);
  }

  44.45% {
    transform: translate(0, -504px);
  }
  55.55% {
    transform: translate(-1280px, -504px);
  }

  55.56% {
    transform: translate(0, -630px);
  }
  66.66% {
    transform: translate(-1280px, -630px);
  }

  66.67% {
    transform: translate(0, -756px);
  }
  77.77% {
    transform: translate(-1280px, -756px);
  }

  77.78% {
    transform: translate(0, -882px);
  }
  88.88% {
    transform: translate(-1280px, -882px);
  }

  88.89% {
    transform: translate(0, -1008px);
  }
  100% {
    transform: translate(-1280px, -1008px);
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.