Делаем задержку анимации, сделанной с помощью Animate css

У меня есть анимация, созданная с помощью Animate css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.text-slide {
  text-align: center;
}

.text-slide>div {
  display: inline-block;
  text-align: center;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  font-size: 30px;
}

.text span {
  display: block;
  padding: 0 10px;
}

.text {
  position: relative;
  animation: text-animation ease 8s infinite;
}

@keyframes text-animation {
  0% {
    top: 0;
  }
  10% {
    top: 0;
  }
  20% {
    top: -40px;
  }
  30% {
    top: -40px;
  }
  40% {
    top: -80px;
  }
  50% {
    top: -80px;
  }
  60% {
    top: -120px;
  }
  70% {
    top: -120px;
  }
  80% {
    top: -160px;
  }
  90% {
    top: -160px;
  }
  100% {
    top: 0px;
  }
}

.animate__animated.animate__fadeIn {
  --animate-duration: 2s;
  --animate-delay: 5s;
}

<div class = "text-slide animate__animated animate__fadeIn">
  <div class = "text-wrap">
    <div class = "text font-semibold">
      <span>Warsaw</span>
      <span>Dubai</span>
      <span>Bogota</span>
      <span>New York</span>
      <span>Cape Town</span>
    </div>
  </div>
</div>

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

Внутри анимации есть анимация: одна создана на чистом CSS, а другая — на animate.css. Я хочу отложить это, сделанное с помощью animate.css. Как заставить это работать? Я попробовал использовать --animate-delay: 5s;, но это не помогло.

html css animate.css

15.04.2024 18:06

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

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

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

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

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

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

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

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

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вместо этого вам нужно добавить animate__delay-5s в div и удалить --animate-delay: 5s;.

Если посмотреть на cdnanimate.css, --animate-delay используется только при настройке animate__delay классов. По умолчанию animate_delay-5s означает задержку 5 секунд, но если вы установите пользовательское свойство на 0.9s, animate_delay-5s фактически означает задержку 0,9 с * 5 = 4,5 секунды. Я не думаю, что это хорошая идея, поскольку имя класса больше не соответствует тому, что он делает.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.text-slide {
  text-align: center;
}

.text-slide>div {
  display: inline-block;
  text-align: center;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  font-size: 30px;
}

.text span {
  display: block;
  padding: 0 10px;
}

.text {
  position: relative;
  animation: text-animation ease 8s infinite;
}

@keyframes text-animation {
  0% {
    top: 0;
  }
  10% {
    top: 0;
  }
  20% {
    top: -40px;
  }
  30% {
    top: -40px;
  }
  40% {
    top: -80px;
  }
  50% {
    top: -80px;
  }
  60% {
    top: -120px;
  }
  70% {
    top: -120px;
  }
  80% {
    top: -160px;
  }
  90% {
    top: -160px;
  }
  100% {
    top: 0px;
  }
}

.animate__animated.animate__fadeIn {
  --animate-duration: 2s;
}

<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

<div class = "text-slide animate__animated animate__fadeIn animate__delay-5s">
  <div class = "text-wrap">
    <div class = "text font-semibold">
      <span>Warsaw</span>
      <span>Dubai</span>
      <span>Bogota</span>
      <span>New York</span>
      <span>Cape Town</span>
    </div>
  </div>
</div>

15.04.2024 18:58

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.text-slide {
  text-align: center;
}

.text-slide > div {
  display: inline-block;
  text-align: center;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  font-size: 30px;
}

.text span {
  display: block;
  padding: 0 10px;
}

.text {
  position: relative;
  animation: text-animation ease 8s infinite;
}

@keyframes text-animation {
  0% {
    top: 0;
  }

  10% {
    top: 0;
  }

  20% {
    top: -40px;
  }

  30% {
    top: -40px;
  }

  40% {
    top: -80px;
  }

  50% {
    top: -80px;
  }

  60% {
    top: -120px;
  }

  70% {
    top: -120px;
  }

  80% {
    top: -160px;
  }

  90% {
    top: -160px;
  }

  100% {
    top: 0px;
  }
}

/* Div Class with animate shorthand to Delay the Animation*/
.text-slide {
  animation:fadeindelay 350ms ease-in backwards 3s;
}

/* Keyframes to the fade in Animation*/
@keyframes fadeindelay {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

<div class = "text-slide animate__animated animate__fadeIn">
  <div class = "text-wrap">
    <div class = "text font-semibold">
      <span>Warsaw</span>
      <span>Dubai</span>
      <span>Bogota</span>
      <span>New York</span>
      <span>Cape Town</span>
    </div>
  </div>
</div>

15.04.2024 19:34

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

Максимальная ширина не работает в электронной почте в формате html при доступе к Gmail из мобильного браузера?

Как иметь горизонтальную полосу прокрутки в таблице и вертикальную полосу прокрутки на основной странице, а также использовать фиксированную позицию для заголовка таблицы html?

Как избежать мерцания в слайд-шоу, созданном с помощью CSS-анимации?

Адаптивное изображение с текстом на любой ширине экрана

CSS 3: наложение изображения при наведении

Используя только CSS, есть ли способ ограничить текст внутри div ровно X количеством символов без использования многоточия?

Невозможно переместить карту с верхней ширины

Попутный ветер включает функцию группового наведения только при включении

Использование `text-overflow: ellipsis` в адаптивной таблице с динамической шириной?

Загрузочное встраивание видео нестандартного размера, не принимающее максимальную высоту

Делаем задержку анимации, сделанной с помощью Animate css

Ответы 2

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

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