Task #2723, Stage #1 - In the corners

Let’s add a simple animation. In it, the circle should move infinitely along the corners of the square.
Let’s do a little preparation before the animation.
One animation cycle of a div.circle element must take 8 seconds.
The animation should be repeated all the time.
Let’s add the animation name right away - circleMove.
We’ll use it to create a keyframe in the next step.

This task is part of the Full-Stack JavaScript Course.
If you have any issues with it, you can ask for community help below the post.
Feel free to help others if you’ve already solved the task.

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Corners</title>
    <style>
        body {
            display: grid;
            place-items: center;
            height: 100vh;
        }
        .square {
            height: 300px;
            width: 300px;
            border: 4px solid #84B59F;
            position: relative;
        }
        .circle {
            background-color: #69A297;
            width: 40px;
            height: 40px;
            position: absolute;
            border-radius: 50%;
            top: -22px;
            left: -22px;
        }
    </style>
  </head>
  <body>
    <div class="square">
      <div class="circle"></div>
    </div>
  </body>
</html>