Animate.css已经存在大约几年了，我必须承认参加聚会已经很晚了。 几个月前，我在网上搜索了一些CSS动画教程时才发现它，并发现动画Animate.css必须是最快，最简单的动画方法。
由一个叫Dan Eden的家伙创建的Animate.css是查看CCS如何工作并在您的网站上执行一些动画操作的快速方法。
被描述为“仅添加CSS动画”的Animate.css有点严肃，但很有趣。 它甚至使像我这样的业余Web设计师也可以快速掌握CSS动画的基础知识，并为网站创建简单而有效的效果。 从单个动画标题到更多涉及的动作，此工具都可以做到。
Animate.css
Animate.css可从GitHub下载，本质上是一个在一个地方收集的简单CSS效果的库。 每个动画都经过精心包装，可以立即使用。 您需要做的就是找到所需的动画并应用该类。 真的就是全部。
如果您不想下载整个库，因为其中包含2500行代码。 您可以访问Animate.css网站，找到一个动画，然后单击Download Animate.css链接。 它将类加载到网页上，供您复制和使用。
不过，使用GitHub并向下钻取以查找所需的效果更加容易。
- 导航到css GitHub页面。
- 单击“源”链接以访问元素列表。
- 从列表中选择所需的效果类型。 Bounce是一个吸引注意力的人，因此请选择“ attention_seekers”链接。
- 选择bounce.css。
- 复制代码并将其放置在页面上以应用动画。
真的就是这么简单。 您显然会为不同的效果选择不同的选项，但最终结果是相同的。 访问执行页面上繁重工作所需的代码。
使用Animate.css构建动画对象
使用Animate.css构建很酷的东西很简单。 只需找到CCS代码并将其添加到您自己的CSS中即可。 如果我能做到，任何人都可以！
Animate.css页面上的第一个选项是bounce，因此让我们在此示例中使用它。
- 粘贴“ 里面 在您的样式表中。
- 找到所需动画的CSS并将其添加到要设置动画的元素中。 例如，添加“ 以添加该反弹效果以测试图像或其他内容。
- 添加以下CSS代码以使其全部正常运行。 取自上面的bounce.css。
@keyframes反弹{
从20％，53％，80％到{
animation-timing-function函数：三次贝塞尔曲线（0.215、0.610、0.355、1.000）；
转换：translate3d（0, 0, 0）;
}
40％，43％{
animation-timing-function函数：三次贝塞尔曲线（0.755，0.050，0.855，0.060）;
转换：translate3d（0，-30px，0）;
}
70％{
animation-timing-function函数：三次贝塞尔曲线（0.755，0.050，0.855，0.060）;
转换：translate3d（0，-15px，0）;
}
90％{
转换：translate3d（0，-4px，0）;
}
}
.bounce {
animation-name：反弹；
transform-origin：中心底部；
}
通过Animate.css使动画更进一步
上面的序列在页面首次加载时增加了反弹效果，这很酷，但是只是一次。 我们如何将其添加到悬停。 这样，只要有人在测试中徘徊，它就会反弹。 这不是我在生产网站上要做的事情，但这是演示一切工作原理的好方法。
将以下代码添加到CSS中，以在悬停效果上添加反弹。 每当鼠标悬停在元素上时，它都应该反弹。
.animated：hover {
-webkit-animation-duration：1秒；
-moz动画持续时间：1秒；
-ms动画持续时间：1秒；
-o动画持续时间：1秒；
动画时间：1秒；
-webkit-animation-fill-mode：两者；
-moz动画填充模式：两者；
-ms-animation-fill-mode：两者；
-o动画填充模式：两者；
animation-fill-mode：两者；
}
如果您了解CSS，那么您将比我更了解如何对不同的操作实现不同的效果。 作为一个初学者，它和Animate.css中提供的库可以帮助我为网页创建基本但有效的动画。
我不知道我会在直播网站上使用多少，因为它们并不总是掉得很好，而且移动用户似乎根本不喜欢它们。 但是，作为CSS如何工作以及如何用于增强Web的一课，它是一个很好的资源。 我只是一个初学者，但即使在Animate.css上花费了几个小时，也使我学到了很多。 我想我会在完成之前更多地使用它。 你呢？
