CSS Text Animation, заменить текст - PullRequest
Новая
       11

CSS Text Animation, заменить текст

0 голосов
/ 15 декабря 2018

Я нашел классную, очень простую текстовую анимацию на веб-сайте, которую я хотел бы перестроить.Вот ссылка (анимация находится в нижнем колонтитуле страницы): http://www.motherbird.com.au/process/ Я пока не знаком с CSS-анимациями, но мне это удалось: 

.animated{
  display: inline;
  text-indent: 8px;
}

.animated span{
  animation: topToBottom 5s  infinite 0s;
  -ms-animation: topToBottom 5s  infinite 0s;
  -webkit-animation: topToBottom 5s  infinite 0s;
  color: red;
  opacity: 0;
  overflow: hidden;
  position: absolute;
}

.animated span:nth-child(2){
  animation-delay: 1s;
  -ms-animation-delay: 1s;
  -webkit-animation-delay: 1s;
}

.animated span:nth-child(3){
  animation-delay: 2s;
  -ms-animation-delay: 2s;
  -webkit-animation-delay: 2s;
}

.animated span:nth-child(4){
  animation-delay: 3s;
  -ms-animation-delay: 3s;
  -webkit-animation-delay: 3s;
}

.animated span:nth-child(5){
  animation-delay: 4s;
  -ms-animation-delay: 4s;
  -webkit-animation-delay: 4s;
}

@-webkit-keyframes topToBottom{
  0% { opacity: 0; }
  25% { opacity: 0;  }
  50% { opacity: 0;  }
  75% { opacity: 0;  }
  100% { opacity: 1; }
}
<h2>CSS Animations are
  <div class="animated">
    <span>cool.</span>
    <span>neat.</span>
    <span>awesome.</span>
    <span>groovy.</span>
    <span>magic.</span>
  </div>
</h2>

Как сделать переход без выцветания?

Спасибо за помощь!

Ответы [ 3 ]

0 голосов
/ 15 декабря 2018

Попробуйте visibility: hidden | visible: 

.animated{
  display: inline;
  text-indent: 8px;
  position: relative;
}

.animated span{
          animation: topToBottom 5s infinite 0s;
      -ms-animation: topToBottom 5s infinite 0s;
  -webkit-animation: topToBottom 5s infinite 0s;
  color: red;
  /* display: none; */
  overflow: hidden;
  position: absolute;
  
  display: inline-block;
  visibility: hidden;
}

.animated span:nth-child(2){
          animation-delay: 1s;
      -ms-animation-delay: 1s;
  -webkit-animation-delay: 1s;
}

.animated span:nth-child(3){
          animation-delay: 2s;
      -ms-animation-delay: 2s;
  -webkit-animation-delay: 2s;
}

.animated span:nth-child(4){
          animation-delay: 3s;
      -ms-animation-delay: 3s;
  -webkit-animation-delay: 3s;
}

.animated span:nth-child(5){
          animation-delay: 4s;
      -ms-animation-delay: 4s;
  -webkit-animation-delay: 4s;
}


@-webkit-keyframes topToBottom{
  0%  { visibility: hidden; }
  20% { visibility: hidden;  }
  40% { visibility: hidden;  }
  60% { visibility: hidden;  }
  80% { visibility: hidden;  }
  100% { visibility: visible; }    
}
<h2>CSS Animations are
  <div class="animated">
    <span>cool.</span>
    <span>neat.</span>
    <span>awesome.</span>
    <span>groovy.</span>
    <span>magic.</span>
  </div>
</h2>

на 10 слов: 

.animated{
  display: inline;
  text-indent: 8px;
  position: relative;
}

.animated span{
          animation: topToBottom 10s infinite 0s;
      -ms-animation: topToBottom 10s infinite 0s;
  -webkit-animation: topToBottom 10s infinite 0s;
  color: red;
  /* display: none; */
  overflow: hidden;
  position: absolute;
  
  display: inline-block;
  visibility: hidden;
}

.animated span:nth-child(2){
          animation-delay: 1s;
      -ms-animation-delay: 1s;
  -webkit-animation-delay: 1s;
}

.animated span:nth-child(3){
          animation-delay: 2s;
      -ms-animation-delay: 2s;
  -webkit-animation-delay: 2s;
}

.animated span:nth-child(4){
          animation-delay: 3s;
      -ms-animation-delay: 3s;
  -webkit-animation-delay: 3s;
}

.animated span:nth-child(5){
          animation-delay: 4s;
      -ms-animation-delay: 4s;
  -webkit-animation-delay: 4s;
}

.animated span:nth-child(6){
          animation-delay: 5s;
      -ms-animation-delay: 5s;
  -webkit-animation-delay: 5s;
}

.animated span:nth-child(7){
          animation-delay: 6s;
      -ms-animation-delay: 6s;
  -webkit-animation-delay: 6s;
}

.animated span:nth-child(8){
          animation-delay: 7s;
      -ms-animation-delay: 7s;
  -webkit-animation-delay: 7s;
}

.animated span:nth-child(9){
          animation-delay: 8s;
      -ms-animation-delay: 8s;
  -webkit-animation-delay: 8s;
}

.animated span:nth-child(10){
          animation-delay: 9s;
      -ms-animation-delay: 9s;
  -webkit-animation-delay: 9s;
}

@-webkit-keyframes topToBottom{
  0%  { visibility: hidden; }
  10% { visibility: hidden;  }
  20% { visibility: hidden;  }
  30% { visibility: hidden;  }
  40% { visibility: hidden;  }
  50% { visibility: hidden;  }
  60% { visibility: hidden;  }
  70% { visibility: hidden;  }
  80% { visibility: hidden;  }
  90% { visibility: hidden;  }
  100% { visibility: visible; }    
}
<h2>CSS Animations are
  <div class="animated">
    <span>cool.</span>
    <span>neat.</span>
    <span>awesome.</span>
    <span>groovy.</span>
    <span>magic.</span>

    <span>more.</span>
    <span>lorem.</span>
    <span>pixel.</span>
    <span>word.</span>
    <span>ten.</span>
  </div>
</h2>
0 голосов
/ 15 декабря 2018

Другая идея - рассмотреть content псевдоэлемента для изменения текста, и у вас будет меньше кода: 

.animated {
  text-indent: 8px;
  color:red;
}

.animated:before {
  content: "cool.";
  animation: topToBottom 5s infinite 0s;
}

@keyframes topToBottom {
  0% {
    content: "cool.";
  }
  25% {
    content: "neat.";
  }
  50% {
    content: "awesome.";
  }
  75% {
    content: "groovy.";
  }
  100% {
    content: "magic.";
  }
}
<h2>CSS Animations are
  <span class="animated">
  </span>
</h2>
0 голосов
/ 15 декабря 2018

Так как анимация-длительность занимает 5s, что представляет 100% всей длительности , и у вас есть пять интервалов или слов, поэтомукаждый промежуток времени будет виден в течение 1 с или 20% времени, а затем будет скрыт до конца.Исходя из этого, вам нужно настроить % внутри @keyframes, чтобы соответствовать критериям и достичь желаемого результата: 

.animated {
  text-indent: 8px;
}

.animated span {
  color: red;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  -ms-animation: topToBottom 5s infinite;
  -webkit-animation: topToBottom 5s infinite;
  animation: topToBottom 5s infinite;
}

.animated span:nth-child(2){
  -ms-animation-delay: 1s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated span:nth-child(3){
  -ms-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated span:nth-child(4){
  -ms-animation-delay: 3s;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated span:nth-child(5){
  -ms-animation-delay: 4s;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}


@-webkit-keyframes topToBottom {
  0%, 20% {opacity: 1} /* visible for 1s */
  20.01%, 100% {opacity: 0} /* hidden for 4s */
}
<h2 class="animated">
  CSS Animations are
  <span>cool.</span>
  <span>neat.</span>
  <span>awesome.</span>
  <span>groovy.</span>
  <span>magic.</span>
</h2>

Всего лишь .01% разницы между ключевыми кадрами гарантирует отсутствие эффекта замирания .

...