Как я могу переместить изображения вверх-вниз, используя ключевой кадр - PullRequest
Новая
       4

Как я могу переместить изображения вверх-вниз, используя ключевой кадр

0 голосов
/ 11 сентября 2018

Я хочу, чтобы мое изображение начиналось с top: 0 и заканчивалось bottom: 0 с плавной анимацией. Я изо всех сил пытаюсь найти решение.

Чтобы быть очень ясным, я не могу использовать фоновые изображения для целей SEO. Решения JS также приветствуются. 

.element {
  height: 200px;
  width: 400px;
  background-color: red;
  position: relative;
  margin: auto;
  overflow: hidden;
}

.element img {
  animation: nudge 5s linear infinite alternate;
  position: absolute;
  top: 0;
  left: 0;
}

@keyframes nudge {
  0%, 100% {
    top: 0;
    bottom: auto;
  }

  50% {
    bottom: 0%;
    top: auto;
  }
}
<div class="element">
  <img src="https://www.neelnetworks.com/wp-content/uploads/2018/08/ecommerce-bg.png" alt=""></div>

1 Ответ

0 голосов
/ 11 сентября 2018

Вместо того, чтобы пытаться анимировать сверху и снизу, вы можете анимировать на translateY и перемещать его сверху вниз, чтобы он не исчезал с экрана 

.element {
  height: 200px;
  width: 400px;
  background-color: red;
  position: relative;
  margin: auto;
  overflow: hidden;
}

.element img {
  animation: nudge 2s linear infinite alternate;
  position: absolute;
  top: 0;
  transform: translateY(0);
}

@keyframes nudge {
  100% {
    transform: translateY(-100%);
    top: 100%;
  }
}
<div class="element"><img src="https://www.neelnetworks.com/wp-content/uploads/2018/08/ecommerce-bg.png" alt=""></div>
...