Анимация @keyframes между тремя DIV показывает свое содержимое при запуске - PullRequest
Новая
       7

Анимация @keyframes между тремя DIV показывает свое содержимое при запуске

1 голос
/ 25 апреля 2019

У меня есть анимация, которая работает.Я просто хочу решить проблему, заключающуюся в том, что все содержимое 3-х div, которые должны чередоваться, отображается поверх других в начале.Через 9 секунд все работает как надо.

Я пробовал множество решений и свойств по подобным вопросам здесь, но безрезультатно.

Вот код: 

.maintext div {
    width: 100%;
    position: absolute;
    top: 0;
}

.maintext h1 {
    font-size: 35px;
    text-align: center;
}

.maintext h3 {
    font-size: 18px;
    text-align: center;
    letter-spacing: 2px;
    line-height: 35px;
}

@keyframes txt3FadeInOut {
    0% { opacity: 1; }
    17% { opacity: 1; }
    33% { opacity: 0; }
    82% { opacity: 0; }
    100% { opacity: 1; }
}

.maintext div:nth-of-type(1) {
    animation: txt3FadeInOut 9s ease-in-out 6s infinite;
}

.maintext div:nth-of-type(2) {
    animation: txt3FadeInOut 9s ease-in-out 3s infinite;
}

.maintext div:nth-of-type(3) {
    animation: txt3FadeInOut 9s ease-in-out 0s infinite;
}
<div class="maintext" >
    <div id="txt3" class="containertxt self-clear">
        <h1>
            First text
        </h1>
        <br>
        <h3>
            first text
        </h3>
    </div>
    <div id="txt3" class="containertxt self-clear">
            <h1>
                Second text
            </h1>
            <br>
            <h3>
                second text
            </h3>
    </div>
    <div id="txt3" class="containertxt self-clear">
            <h1>
                Third text
            </h1>
            <br>
            <h3>
                Third text
            </h3>
    </div>
</div>

https://jsfiddle.net/u3x57wnL/23/

Ответы [ 2 ]

0 голосов
/ 25 апреля 2019

Поскольку ваша анимация длится 9 секунд, вы можете вычесть 9 секунд из задержек и оставить те же самые - но чтобы запустить анимацию с уже запущенной анимацией.

Итак, задержка в 6 с становится одной из 6 - 9 = -3 с.

Кроме того, вы можете поделиться общими свойствами, чтобы сделать ваш код более СУХИМ 

.maintext div {
  width: 100%;
  position: absolute;
  top: 0;
}

.maintext h1 {
  font-size: 35px;
  text-align: center;
}

.maintext h3 {
  font-size: 18px;
  text-align: center;
  letter-spacing: 2px;
  line-height: 35px;
}

@keyframes txt3FadeInOut {
  0% {
    opacity: 1;
  }
  17% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  82% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.maintext div {
  animation: txt3FadeInOut 9s ease-in-out infinite;
  }

.maintext div:nth-of-type(1) {
  animation-delay: -3s;
}

.maintext div:nth-of-type(2) {
  animation-delay: -6s;
}
<div class="maintext">
  <div id="txt3" class="containertxt self-clear">
    <h1>
      First text
    </h1>
    <br>
    <h3>
      first text
    </h3>
  </div>
  <div id="txt3" class="containertxt self-clear">
    <h1>
      Second text
    </h1>
    <br>
    <h3>
      second text
    </h3>
  </div>
  <div id="txt3" class="containertxt self-clear">
    <h1>
      Third text
    </h1>
    <br>
    <h3>
      Third text
    </h3>
  </div>
</div>
0 голосов
/ 25 апреля 2019

Вы можете попробовать создать три разные анимации, такие как: 

@keyframes txt1FadeInOut {
  0% { opacity: 1; }
  16% { opacity: 1; }
  32% { opacity: 0; }
  48% { opacity: 0; }
  64% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes txt2FadeInOut {
  0% { opacity: 0; }
  16% { opacity: 0; }
  32% { opacity: 1; }
  48% { opacity: 1; }
  64% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes txt3FadeInOut {
  0% { opacity: 0; }
  16% { opacity: 0; }
  32% { opacity: 0; }
  48% { opacity: 0; }
  64% { opacity: 1; }
  100% { opacity: 1; }
}

, а затем запустить их в течение того же промежутка времени

...