Поймите, почему анимация ключевого кадра, кажется, не следует за интервалами% - PullRequest
Новая
       43

Поймите, почему анимация ключевого кадра, кажется, не следует за интервалами%

0 голосов
/ 08 октября 2019

Отказ от ответственности: Реагируйте на пример, но он очень понятен с точки зрения фона без реакции.

https://codesandbox.io/s/infallible-heyrovsky-2g48q

Я пытаюсь создать анимацию постепенного исчезновения / затухания, котораябудет циклически проходить через массив строк. Вот пример кода и коробки того, над чем я работаю. Текущая ошибка, которую я пытаюсь решить, хорошо видна.

Насколько я понимаю, ключевой кадр работает так, что он применяет определенные стили через определенные интервалы (процент от всей анимации, которую мыв настоящее время).

Вот пример чего-то, что не имеет смысла для меня. Если при 30% мы находимся при непрозрачности 0, и при 80% мы находимся при непрозрачности 0, и мы на 100% ... тогда зачем нам нужно указывать 80%? Зачем нам даже нужно указывать 100%, поскольку он просто вернется к 0% снова? 

keyframe {
  0% {
    opacity: 0;
  }
    5% {
    opacity: 0;
  }
    10% {
    opacity: 1;
  }
    25% {
    opacity: 1;
  }
    30% {
    opacity: 0;
  }
    80% {
    opacity: 0;
  }
    100% {
    opacity: 0;
  }
}

Это только часть того, что я пытаюсь понять, и это больше частьвсю картину песочницы я связал.

Я не понимаю, почему текстовые строки перекрывают друг друга, поскольку animation duration is 21s, задержки n-го ребенка увеличиваются последовательно на 3 с, а в words array.

есть 7 элементов.
...