animate.css 是一个非常流行的动画库，它提供了很多炫酷的动画效果，可以让我们的网站更加生动和有趣。除了基本的样式类以外，我们还可以通过触发事件来使用 animate.css。
首先，在我们的 HTML 文件中引入 animate.css：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-tqig5TARcx1Z6eKmGSMJWeD3OPfVjN3pLwY9OmjiG9szzNQrUUL8qalqkI32OBoZgfPKOR+Z7sP76rHMZqcSgA==" crossorigin="anonymous" /
接下来，我们可以使用 jQuery 或者 原生 JavaScript 来触发动画效果。以 jQuery 为例：
$(document).ready(function() {
$(window).scroll(function() {
$('.animate').each(function() {
var position = $(this).offset().top,
screen_height = $(window).height(),
trigger_point = screen_height - (screen_height / 4);
if (position 上面的代码说明了如何使用 animate.css 让元素在页面滚动时触发动画。我们首先在 HTML 中给需要触发动画的元素添加一个 class 名称为 animate：
<div class="animate"></div>
然后在 JavaScript 中，我们使用 jQuery 来检测页面滚动的位置，如果页面滚动到了需要触发动画的元素，那么就为它添加 animate.css 提供的动画效果。上面的例子是使用了 fadeInUp 这个动画效果，当元素出现时会出现淡入淡出的效果并向上移动。
对于原生 JavaScript，我们可以使用 Intersection Observer API 来实现类似的效果。具体使用可以参考 官方文档 。
查看更多关于animate。css 触发事件的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did245492