Ключевые кадры возвращаются (CSS) - PullRequest
Новая
       35

Ключевые кадры возвращаются (CSS)

1 голос
/ 02 февраля 2020

Так что в качестве практики я попробовал себя на простой анимации: змея (как в игре), окружающая экран входа, который я сделал. Я хочу, чтобы он просто go сформировал позицию 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);
         }

Класс змеи: 


.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;

}

Проблема заключается в том, что после завершения ключевого кадра он снова меняет свою позицию. Это означает, что после перехода вправо от экрана он идет по диагонали от верхнего правого до нижнего левого.

Буду признателен за любую помощь. Я не думаю, что любой другой код вызывает проблемы, но если нужно, просто скажите мне.

1 Ответ

0 голосов
/ 02 февраля 2020

Вам нужно объединить 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>
...