I'm trying to add the animation 'fadeIn' into my proje[enter link description here][1]ct but the animation doesn't work. I would appreciate it if anyone who has experience with animate.css will be able to help me out. I installed the CDN { from animate.css website into my project.
I added "animate__animated animate__fadeIn" into my class but it's not working.
Any help would be appreciated thank you.
<!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>