Блог

Я пытаюсь практиковать простую CSS-анимацию с ключевыми кадрами. Я пытаюсь переместить квадрат слева направо, однако, похоже, это не работает с положением относительно/абсолютным. Я работаю, когда выполняю преобразование: translateX(…) или что-то подобное, но не с помощью вышеупомянутого метода. Есть идеи, почему?

Код CSS:

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: rgb(70, 70, 162);
}

.box1 {
  height: 600px;
  width: 80%;
  background-color: white;
  margin: 50px auto;
  border: 5px solid black;
  position: relative;
}

.square1 {
  height: 100px;
  width: 100px;
  background-color: red;

  position: absolute;
  top: 0px;
  left: 0px;

  animation-name: left-right;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes left-right {
  0% {
    top: 0px;
    left: 0px;
  }

  100% {
    top: 0px;
    right: 0px;
  }
}

 

Итак, в ключевых кадрах вы были правы

 100% {
top: 0px;
right: 500px;}
 

где, как это нужно было оставить

 100% {
top: 0px;
left: 500px;}
 

полный код:

 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: rgb(70, 70, 162);
}

.box1 {
  height: 600px;
  width: 80%;
  background-color: white;
  margin: 50px auto;
  border: 5px solid black;
  position: reletive;
}

.square1 {
  height: 100px;
  width: 100px;
  background-color: red;
  position: absolute;
  top: 0px;
  left: 0px;
  animation-name: left-right;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes left-right {
  0% {
    top: 0px;
    left: 0px;
  }

  100% {
    top: 0px;
    left: 500px;
    /*here*/
  }
}