为什么我的效果不是一个上一个右的动画

Question

@keyframes move {        0% {            transform: translate(0);        }        50% {            transform: translate(1000px, 0px);        }        100% {            transform: translate(0);        }    }    @keyframes movelast {        0% {            transform: translate(0);        }        50% {            transform: translate(0px, 1000px);        }        100% {            transform: translate(0);        }    }    .move {        background-color: red;        position: relative;        width: 200px;        height: 200px;        /* margin: 20px 0 50px 0; */        animation-duration: 1s;        /* 确定动画的来源 */        animation-name: move;        /* 下面这行是无限循环动画 */        /* animation-iteration-count: infinite; */    }    .movelast {        position: absolute;        background-color: red;        width: 200px;        height: 200px;        /* margin: 20px 0 50px 0; */        animation-duration: 1s;         /* 确定动画的来源 */        animation-name: movelast;         /* 下面这行是无限循环动画 */        /* animation-iteration-count: infinite; */    }<div class="move">

        <div class="movelast">

Answer 1

回答如下，记得采纳一下哦！

 transform: translate(0px, 1000px);

这不是向下走的吗，当然不会向上哇！
改成：

 transform: translate(0px, -1000px);

还不行试试下面这个：

.move {
  background-color: red;
  position: relative;
  width: 200px;
  height: 200px;
  animation-duration: 1s;
  animation-name: move;
}

.movelast {
  position: absolute;
  background-color: red;
  width: 200px;
  height: 200px;
  animation-duration: 1.5s; /* 持续时间更长 */
  animation-name: movelast;
  animation-delay: 1s; /* 延迟1秒执行 */
}

@keyframes move {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(1000px, 0px);
  }
  100% {
    transform: translate(0);
  }
}

@keyframes movelast {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(0px, -1000px); /* 向上移动*/
  }
  100% {
    transform: translate(0);
  }
}