Движение элемента по часовой стрелке

Question

Только начинаю изучать веб. Подскажите пожалуйста, как заставить квадрат перемещаться по часовой стрелке и при наведении мышки он прекращал движение, а если убрать её то продолжал движение, 2 дня ломаю голову, никак не могу понять

function animation(args, elem) {
  var speed = 20;
  var x = 0;
  var y = 0;
  var right = true;
  var down;
  var left;
  var up;
  var n = -10;
  setInterval(function() {
    if (right) {
      elem.style.left += -n + 'px';
      x += -n;
      if (x >= 200) {
        down = true;
        right = false;
      }
    }
    if (down) {
      elem.style.top += -n + 'px';
      y += -n;
      if (y >= 200) {
        down = false;
        left = true;
      }
    }
    if (left) {
      elem.style.left += n + 'px';
      x += n;
      if (x <= 0) {
        left = false;
        up = true;
      }
    }
    if (up) {
      elem.style.top += n + 'px';
      y += n;
      if (y <= 0) {
        up = false;
        right = true;
      }
    }
  }, speed)
}

.content {
  position: absolute;
  width: 80%;
  height: 80%;
  background: blue;
}

.css {
  position: absolute;
  width: 30px;
  height: 30px;
  left: 10px;
  top: 10px;
  border: 3px solid #fff;
  background: black;
  cursor: pointer;
}

<div class="content">
  <div class="css" onClick="animation({}, this);"></div>
</div>

Answer 1

Тут можно обойтись даже без JS, с помощью CSS анимации

.content{
    position: absolute;
    width: 150px;
    height: 150px;
    background: blue;
}
.css {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 10px;
    top: 10px;
    border: 3px solid #fff;
    background: black;
    cursor: pointer;
    animation: clock 5s infinite;
    animation-timing-function: linear;
}
.content:hover .css{
    animation-play-state: paused;
}
@keyframes clock{

  0% {
    left: 10px;
    top: 10px;
  }
  25% {
    left: calc(100% - 45px);
    top: 10px;
    transition: 1s;
  }
  50% {
    left: calc(100% - 45px);
    right: 10px;
    top: calc(100% - 45px);
    bottom: 10px;
    transition: 1s;
  }
  75% {
    top: calc(100% - 45px);
    transition: 1s;
    left: 10px;
    right: 10px;
  }
  100% {
    left: 10px;
    right: 10px;
    transition: 1s;
  }
}

<div class = "content">
    <div class="css"></div>
</div>

БЛОГ НА HUSL

Движение элемента по часовой стрелке

Ответы (1 шт):