Зацикливание анимации слайдов SVG вне экрана без переполнения - PullRequest
Новая
       11

Зацикливание анимации слайдов SVG вне экрана без переполнения

0 голосов
/ 14 марта 2019

Как я могу остановить переполнение второго абсолютно позиционированного SVG? Если невозможно, каковы другие способы, которыми я мог бы реализовать это? Любая помощь приветствуется, спасибо.

JSFiddle: https://jsfiddle.net/art7bx2v/2/

Pseudo code of structure:

container
  svg 1
  svg 1 alt
container

  .svg-container {
  overflow: hidden;
}

.svg-odd {
  position: absolute;
  animation: slide 15s linear 0s infinite;
}

.svg-odd-alt {
  transform: translateX(-101%);
  animation: slideAlt 15s linear 0s infinite;
}

.svg-odd, .svg-odd-alt {
  width: 3840px;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes slideAlt {
  from {
    transform: translateX(-101%);
  }

  to {
    transform: translateX(0);
  }
}

1 Ответ

1 голос
/ 14 марта 2019

Добавить position: relative к .svg-container.

Скрипка: https://jsfiddle.net/uszq6ky4/

Причина, по которой это работает, заключается в том, что ваши два дочерних элемента имеют position: absolute. Когда вы применяете position: absolute (или fixed), элементы будут позиционироваться относительно позиционированного родителя (кроме static, который используется по умолчанию).

...