关键帧自行恢复 (CSS)

Question

所以作为练习，我自己尝试了一个简单的动画：一条蛇（就像在游戏中一样）围绕着我制作的登录屏幕。我希望它从位置 A-->B-->C-->D 开始。

我使用的关键帧如下：

@keyframes snake{

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

    25%{
        transform: translateX(1500px);
    }

    50%{
        transform: translateY(1000px);     
    }
    75%{
        transform: translateX(-1500px)
    }
    100%{

        transform: translateY(-1000px);
         }

蛇class:


.snake{

    height: 50px;
    width: 50px;
    display: inline-block;
    position: absolute;
    background-color: white;
    border: 1px solid red;
    left: 10%;
    top: 100px;
    animation-fill-mode: forwards;
    animation-name: snake;
    animation-duration: 10s;
    animation-play-state: running;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

}

问题是，当关键帧结束时，它会再次恢复其位置。意思是在转到屏幕右侧后，它从右上角到左下角呈对角线。

如果有任何帮助，我将不胜感激。我不认为任何其他代码会导致问题，但如果需要，请告诉我。

Answer 1

您需要将 translateX 和 translateY 组合在一起。仅应用一个意味着另一个是 0，这会造成问题。

示例：

@keyframes snake {
  25% {
    transform: translate(150px,0);
  }
  50% {
    transform: translate(150px,100px);
  }
  75% {
    transform: translate(-100px,100px)
  }
  100% {
    transform: translate(-100px,-100px);
  }
}

.snake {
  height: 50px;
  width: 50px;
  display: inline-block;
  position: absolute;
  background-color: white;
  border: 1px solid red;
  left: 10%;
  top: 100px;
  animation: snake 5s infinite alternate linear;
}

<div class="snake"></div>

关键帧自行恢复 (CSS)

KeyFrames revert themselves (CSS)

css

animation

transform

keyframe