Добавим простую анимацию. В ней круг должен бесконечно двигаться по углам квадрата.
Сделаем небольшую подготовку перед анимацией.
Один цикл анимации элемента div.circle должен длится 8 секунд.
Повторятся же анимация должна постоянно.
Сразу добавим имя анимации - circleMove.
Его используем для создания keyframe на следующем шаге.

Эта задача — часть курса по Full-Stack JavaScript.
Ты можешь задать свой вопрос в комментариях под постом.
Если ты уже решил задачу, то не стесняйся помочь другим.

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>