如何使用 animate.css 将 2 个动画添加到一个 html 标签？答案

【问题标题】：How to add 2 animations to one html tag using animate.css?如何使用 animate.css 将 2 个动画添加到一个 html 标签？
【发布时间】：2015-07-09 11:04:53
【问题描述】：

我想使用 Dane Den 的 Animate.css 向我的一个 HTML 对象添加 2 种不同类型的动画。 https://github.com/daneden/animate.css

这可能吗？

【问题讨论】：

标签： css jquery-animate animate.css

【解决方案1】：

使用 css 而不是类来做到这一点。如果您使用类，最后一个将覆盖其他类。

animation-name: animation1, animation2, animation3;

例如：

如果您想使用bounce、flash 和pulse，您可以编写自己的类来做到这一点：

HTML

<div class="animated myAnimations"></div>

CSS

.myAnimations {
    animation-name: bounce, flash, pulse;
    -webkit-animation-name: bounce, flash, pulse;



    /*
    you can set different proporties to different animations too:
    1s to bounce
    2s to flash
    3s to pulse
    */

    animation-duration: 1s, 2s, 3s;
    -webkit-animation-duration: 1s, 2s, 3s;
}

Fiddle

【讨论】：

你能给我举个例子吗？
对不起，我离开了animated 课程。
.myAnimation { 动画名称：zoomIn, zoomOutDown; -webkit 动画名称：zoomIn、zoomOutDown； /* 你也可以为不同的动画设置不同的比例：1s 反弹 2s 闪烁 3s 脉冲 */ animation-delay: 2s, 5s; -webkit-动画延迟：2s，5s； }
将.animated { animation-fill-mode: forwards !important; -webkit-animation-fill-mode: forwards !important; } 添加到css。小提琴：jsfiddle.net/nn18co76/5
这里你可以找到关于动画的信息：www.w3schools.com/css/css3_animations.asp