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

Я нашел классную, очень простую текстовую анимацию на веб-сайте, которую хотел бы перестроить. Вот ссылка (анимация в нижнем колонтитуле страницы): 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>

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

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

css css-animations

15.12.2018 19:45

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

5 263

Ответы 3

Поскольку продолжительность анимации принимает 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% разницы между ключевые кадры гарантирует отсутствие эффекта угасание.

15.12.2018 20:11

Попробуйте 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>

15.12.2018 20:38

Другая идея - рассмотреть 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>

15.12.2018 20:54

Другие вопросы по теме

ReactJS - предотвращение начальной анимации модального окна с помощью хуков реакции

Прерывание анимации вращения CSS в Safari

Css анимация white-space: nowrap;

Анимация значков Loaction с использованием чистого CSS

Создание настольной игры с использованием анимации canvas + css

Как закончить анимацию, даже если ее правило удалено?

Отображать элемент в том же месте, что и другой, во время CSS-анимации

Анимация в CSS вызывает лаги на сайте

Css анимация нижняя граница не работает в сафари, даже если объявлены ключевые кадры webkit

Добавление к свойству CSS

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

Ответы 3

Другие вопросы по теме

Похожие вопросы