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>