html - 如何使用 animate.css 向网站添加动画

问题描述

我正在尝试将动画“淡入”添加到我的项目中[在此处输入链接描述][1]ct，但动画不起作用。如果有使用 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 &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>

标签： htmlcssanimationcss-animationsanimate.css

html - 如何使用 animate.css 向网站添加动画

问题描述

解决方案

推荐阅读