Как вы оживляете мульти текст, оставайтесь на несколько секунд и оживляете с помощью CSS - PullRequest
Новая
       19

Как вы оживляете мульти текст, оставайтесь на несколько секунд и оживляете с помощью CSS

0 голосов
/ 29 ноября 2018

*** Обновление **** Удастся собрать все 3 строки текста, но попытка решить проблему после перемещения снова появится.Обновлены коды ниже.

*** Обновление 2 **** Хорошо, мне удалось решить проблему (я думаю).Мне просто нужно добавить animation-fill-mode: forwards;для основного div и добавленного animation-fill-mode: назад для всего внутреннего содержимого.Но я открыт, если у любого эксперта есть лучшие решения.

Я пытался изучать анимацию, и я хочу использовать этот тип анимации, желательно только с использованием CSS, но если это невозможно, я неЯ не против CSS и JS.

Я хочу сделать следующее: у меня есть 3 строки текста

XXXXXXXXXX

xxxxxxxxx

xxxxxxxxx

Когда страница загрузится, появится первая строка, затем вторая и третья.Чем они останутся, скажем, на 5 секунд, прежде чем все 3 выйдут и исчезнут.

Пока мне удалось это сделать: Просмотреть в Codepen 

.heading-primary {
  color: #000;
  text-transform: uppercase;
  backface-visibility: hidden;
  margin-bottom: 6rem;
  animation: moveOutRight 2s ease-out 10s;
  animation-fill-mode: forwards; 
}
.heading-primary--main {
  display: block;
  font-size: 6rem;
  font-weight: 400;
  letter-spacing: 3.5rem;
  animation-name: moveInLeft;
  animation-duration: 2s;
  animation-timing-function: ease-out;
    animation-fill-mode: backwards; 
}
.heading-primary--sub {
  display: block;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 1.75rem;
  font-weight: 700;
  animation: moveInLeft 2s ease-out 1s;
      animation-fill-mode: backwards; 
}
.heading-primary--sub1 {
  display: block;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 1.75rem;
  font-weight: 700;
  animation: moveInLeft 2s ease-out 2s;
      animation-fill-mode: backwards; 

}

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem);
  }
100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes moveOutRight {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
100% {
    opacity: 0;
    transform: translateX(10rem);
  }
}
<div class="header__text-box">
            <h1 class="heading-primary"><span class="heading-primary--main">Outdoors </span><span class="heading-primary--sub">is where life happens</span>
              <span class="heading-primary--sub1">is where life happens</span>
  </h1></div>

Но как мне заставить текст 3 двигаться вместе, а не по одному за раз.то есть, я хочу, чтобы они приходили по одному за раз, что работает, но не могу найти способ заставить их двигаться вместе.Я думаю, что это как-то связано с установленной мной задержкой, которая также влияет на выезд.

...