animate.css работает только в том случае, если добавлен «бесконечный»

Моя проблема заключается в том, что анимация не отображается на моей веб-странице, если только «бесконечный» не добавлен в класс. Пример:animate.css работает только в том случае, если добавлен «бесконечный»

<head> 
    <link rel="stylesheet" href="css/animate.css"> 
</head>

Сценарий 1 (анимированный + rotateIn ничего не делает на веб-странице):

<body> 
<img class="animated rotateIn" src="images/mackfilms.png" alt=""> 
</body>

Сценарий 2 (добавление бесконечен класса делает анимацию появляются Но бесконечно ....):

<body> 
<img class="animated rotateIn infinite" src="images/mackfilms.png" alt=""> 
</body>

Это похоже на любой элемент, с которым я использую эту комбинацию. Анимации НЕ появляются, если не добавлено «бесконечное», что не является результатом, к которому я стремлюсь.

источник

2016-02-11 Joel D' Arnot

Ну. Теперь поделитесь своим CSS. Я не вижу этого в волшебном хрустальном шаре. –

введите свою скрипту демо – Krish

что здесь бесконечно? – HebleV

Необходимо сначала скрыть объект. например Добавить класс скрытых. Затем проверьте, находится ли объект в окне просмотра, чтобы удалить скрытый класс.

Почему? Поскольку линейные анимации css не могут работать на объекте, уже отображаемом блоке и видимом в dom/viewport.

Как это работает? Объект в этом случае изображение будет:

opacity : 0

На объекте, входящего в иллюминатор Javascript будет удалить скрытый класс и анимация начнется.

Чтобы прочитать подробнее об этом смотрите здесь:

https://github.com/daneden/animate.css

Все будет объяснено.

источник

2016-02-11 16:40:04

Это, похоже, не работает для меня, и я, к сожалению, не нашел ответов в приведенной ссылке. Спасибо всем, Энди! –

Вы используете javascript на странице, чтобы удалить классы? –

Вы используете javascript для удаления классов? Вы можете сделать целую кучу других вещей с помощью animate.css, когда вы объедините его с jQuery или добавьте свои собственные правила CSS. Динамически добавлять анимации с помощью jQuery с легкостью: $ ('# yourElement'). AddClass ('animated bounceOutLeft'); –

animate.css работает только в том случае, если добавлен «бесконечный»

ответ

Смежные вопросы