Почему Animated. css не работает, как описано на веб-сайте?

Question

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

Шаг 1: Ссылка в HTML

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

Шаг 2: Добавьте класс animate__animated к элементу

<p>Hello <span class="animate__animated animate__bounce">there!</span</p>

Вот веб-сайт, на котором была взята информация : https://animate.style/

Answer 1

Это потому, что анимацию нужно применить к элементу block или inline-block. По умолчанию элемент span - это элемент inline. Итак, вам нужно либо добавить CSS, чтобы создать span display: inline-block, либо переместить класс в тег p.

span {
  display: inline-block;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" rel="stylesheet" />
<p>Hello <span class="animate__animated animate__bounce">there!</span</p>