我试图在我的proje[在此输入链接描述][1]ct中添加动画'fadeIn'，但动画不起作用。如果有谁有使用animate.css的经验，能够帮助我，我将感激不尽。我把animate.css网站上的CDN{安装到我的项目中。
我在我的类中添加了 "animate__animated animate__fadeIn"，但它没有工作。
任何帮助将被感激谢谢你。
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="stylesheet" type="text/css" href="resources/css/queries.css">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
<title>Omni Food</title>
</head>
<body>
<header>
<nav>
<div class="row">
<img src="Resources/IMG/logo-white.png" alt="Omnifood logo" class="logo">
<img src="Resources/IMG/logo.png" alt="Omnifood logo" class="logo-black">
<ul class="main-nav">
<li><a href="#features">Food delivery</a></li>
<li><a href="#works">How it works</a></li>
<li><a href="#cities">Our cities</a></li>
<li><a href="#plans">Sign up</a></li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
<a class="btn btn-full js--scroll-to-plans" href="#">I’m hungry</a>
<a class="btn btn-ghost js--scroll-to-start" href="#">Show me more</a>
</div>
</header>
<section class="section-features js--section-features" id="features">
<div class="row">
<h2>Get food fast — not fast food.</h2>
<p class="long-copy">
Hello, we’re Omnifood, your new premium food delivery service. We know you’re always busy. No time for cooking. So let us take care of that, we’re really good at it, we promise!
</p>
</div>
<div class="row animate__animated animate__fadeIn">
<div class="col span-1-of-4 box">
<i class="ion-ios-infinite-outline icon-big"></i>
<h3>Up to 365 days/year</h3>
<p>
Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-stopwatch-outline icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p>
You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-nutrition-outline icon-big"></i>
<h3>100% organic</h3>
<p>
All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-cart-outline icon-big"></i>
<h3>Order anything</h3>
<p>
We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>
在Animate.css的文档中说。
你不能对内联元素进行动画处理. 尽管一些浏览器可以对内联元素进行动画，但这违背了CSS动画的规范，在一些浏览器上会被破坏或最终停止工作。始终对块级或内嵌块级元素进行动画处理（网格和柔性容器以及子元素也是块级元素）。当动画一个inline-block级别的元素时，你可以设置元素显示：inline-block。
也许，由于某些原因，元素的显示不允许显示动画，如果我们能在线检查你的项目，会对你的项目有帮助。
这里是animate.css的工作代码。它只是按照你的需要与fadeIn效果工作得很好。
演示。https:/jsfiddle.netusmanmunir2mbghper7。
更多信息请参考本文档。https:/animate.style
超文本标记语言
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="vendors/css/ionicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link rel="stylesheet" type="text/css" href="resources/css/queries.css">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel='stylesheet' type='text/css'>
<title>Omni Food</title>
</head>
<body>
<header>
<h1 class="animate__animated animate__fadeIn">An animated element</h1>
<nav>
<div class="row animate__animated animate__fadeIn">
<ul class="main-nav animate__fadeIn">
<li><a href="#features">Food delivery</a></li>
<li><a href="#works">How it works</a></li>
<li><a href="#cities">Our cities</a></li>
<li><a href="#plans">Sign up</a></li>
</ul>
</div>
</nav>
<div class="hero-text-box animate__animated animate__fadeIn">
<h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
<a class="btn btn-full js--scroll-to-plans" href="#">I’m hungry</a>
<a class="btn btn-ghost js--scroll-to-start" href="#">Show me more</a>
</div>
</header>
<section class="section-features js--section-features" id="features">
<div class="row animate__animated animate__fadeIn">
<div class="col span-1-of-4 box">
<i class="ion-ios-infinite-outline icon-big"></i>
<h3>Up to 365 days/year</h3>
<p>
Never cook again! We really mean that. Our subscription plans include up to 365 days/year coverage. You can also choose to order more flexibly if that's your style.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-stopwatch-outline icon-big"></i>
<h3>Ready in 20 minutes</h3>
<p>
You're only twenty minutes away from your delicious and super healthy meals delivered right to your home. We work with the best chefs in each town to ensure that you're 100% happy.
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-nutrition-outline icon-big"></i>
<h3>100% organic</h3>
<p>
All our vegetables are fresh, organic and local. Animals are raised without added hormones or antibiotics. Good for your health, the environment, and it also tastes better!
</p>
</div>
<div class="col span-1-of-4 box">
<i class="ion-ios-cart-outline icon-big"></i>
<h3>Order anything</h3>
<p>
We don't limit your creativity, which means you can order whatever you feel like. You can also choose from our menu containing over 100 delicious meals. It's up to you!
</p>
</div>
</div>
</section>