0

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 &mdash; 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>

2 Answers 2

1

In the documentation of Animate.css says:

You can't animate inline elements. Even though some browsers can animate inline elements, this goes against the CSS animation specs and will break on some browsers or eventually cease to work. Always animate block or inline-block level elements (grid and flex containers and children are block-level elements too). You can set an element to display: inline-block when animating an inline-level element.

Maybe, for some reason, the display of the element don't let to show the animation. It would be helpful if we can check your project online, to get deeper.

1
0

Here is working code of animate.css. Its just working fine as you needed with fadeIn Effects.

Demo: https://jsfiddle.net/usmanmunir/2mbghper/7/

Refer to this documentation for more info: https://animate.style/

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>
      <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>
3
  • Thank you for your response but the link that you provided doesn't work. I also copied your code in my editor (brackets) and there was no fadeIn effect. I'm really confused why you're able to do it but I'm not. Did you add keyframes , delays or opacity to your code? Jun 4, 2020 at 11:53
  • Update I tried the wobble animation and it worked, I think when I apply the fadeIn animation I have to add a delay so I see the effect or maybe add opacity. Please advise me if I'm wrong (I'm new to this lo) Jun 4, 2020 at 12:10
  • @EmmanuelAppiah Can you accept this an answer please. So this solution will help others too. Jun 18, 2020 at 0:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.