Javascript 如何逐个设置引导4张卡的动画？

我需要帮助动画卡在引导4

我有4个卡盒，如下图所示，这是一个简单的引导4个卡盒和4个卡盒

每当用户滚动到此部分时，我尝试从右侧逐个滑动每个框。如何实现

我不是在尝试制作滑块/旋转木马

请检查此项以供参考

4个盒子，每个盒子需要从右边来。 在代码笔中，以上所有内容同时从左侧出现。 我需要它从右边和一个接一个，当用户滚动到该部分

这是我正在使用的boostrap 4卡的代码

       <!-- Card Row starts here -->
   <div class="card-deck ">
      <div class="card card-detail card-text1">
         <img class="card-img-top img-fluid" src="images/Analytics.png" alt="Card image cap">
         <div class="card-body">
            <h5 class="card-title text-center">Analytics</h5>
            <p class="card-text text-center text-justify ">Our amazing tracking platform allows you to view in-depth analytics for your traffic as well as our dashboard provides proprietary reporting with actionable statistics to analyze and optimize your results in real-time. Every click gets counted.</p>
         </div>
      </div>
      <div class="card card-detail card-text1 ">
         <img class="card-img-top img-fluid" src="images/Offer-Well.png" alt="Card image cap">
         <div class="card-body">
            <h5 class="card-title text-center">Offer Well</h5>
            <p class="card-text text-center text-justify">Our OfferWall gives your users the most options to earn in one location. You can deploy a complete rewards-based monetization solution on your site in minutes as it's quite easy and simple.</p>
         </div>
      </div>
      <div class="card card-detail card-text1 ">
         <img class="card-img-top img-fluid" src="images/Inventory.png" alt="Card image cap">
         <div class="card-body">
            <h5 class="card-title text-center">Inventory</h5>
            <p class="card-text text-center text-justify ">With over 2,000 active campaigns in our system, our algorithms will find the best converting ones for your placement. Your users have the power to easily earn by watching videos, downloading apps, taking short surveys, and completing other quick offers. </p>
         </div>
      </div>
      <div class="card card-detail card-text1">
         <img class="card-img-top img-fluid" src="images/Support.png" alt="Card image cap">
         <div class="card-body">
            <h5 class="card-title text-center">Support</h5>
            <p class="card-text text-center text-justify">Each publisher is assigned a dedicated account manager that can help you with integration as well as in every aspects. Moreover, your user can contact us if they're running with issues.</p>
         </div>
      </div>
   </div>
   <!-- Card Row Ends here -->

分析
我们惊人的跟踪平台允许您查看流量的深入分析，我们的仪表板提供专有报告和可操作的统计数据，以实时分析和优化您的结果。每次点击都会被计数
报好价
我们的OfferWall为您的用户提供了在一个地点赚取最多的选择。您可以在几分钟内在您的站点上部署一个完整的基于奖励的货币化解决方案，因为它非常简单
库存
我们的系统中有2000多个活动，我们的算法将为您的位置找到最佳的转换活动。您的用户可以通过观看视频、下载应用程序、进行简短调查和完成其他快速服务轻松赚钱
支持
每个发行商都有一个专门的客户经理，可以在各个方面帮助您进行集成。此外，如果您的用户遇到问题，可以与我们联系

编辑-问题详细信息更改后

根据@Juliver Galleto的建议，您可以使用插件aosjs

下面是我正在运行的代码片段

AOS.init({
持续时间：1200，
})

*{
框大小：边框框；
}
.项目{
宽度：100px；
高度：200px；
保证金：50px自动；
填充顶部：75px；
背景：#ccc；
文本对齐：居中；
颜色：#FFF；
字号：3em；
}

AOS-动画
1.
2.
3.

编辑-问题详细信息更改后

根据@Juliver Galleto的建议，您可以使用插件aosjs

下面是我正在运行的代码片段

AOS.init({
持续时间：1200，
})

*{
框大小：边框框；
}
.项目{
宽度：100px；
高度：200px；
保证金：50px自动；
填充顶部：75px；
背景：#ccc；
文本对齐：居中；
颜色：#FFF；
字号：3em；
}

AOS-动画
1.
2.
3.

您尝试过这个插件吗？要设置动画，只需将特定元素与有效的aos属性绑定（请参阅下文）

如果要对其设置一次动画，则可以添加数据aos once属性

<div data-aos="fade-up" data-aos-once="true"></div>

依此类推，检查这里的插件

更新：要使每个元素，显示在不同的持续时间，可以添加数据aos延迟

<div id="animate1" data-aos="fade-up" data-aos-once="true" data-aos-delay="500"></div>
<div id="animate2" data-aos="fade-up" data-aos-once="true" data-aos-delay="1000"></div>
<div id="animate3" data-aos="fade-up" data-aos-once="true" data-aos-delay="1500"></div>

从上面的示例可以看出，每个元件都有500毫秒的延迟

注意：确保首先初始化插件

<script>
    AOS.init();
</script>

AOS.init（）；

您尝试过这个插件吗？要设置动画，只需将特定元素与有效的aos属性绑定（请参阅下文）

如果要对其设置一次动画，则可以添加数据aos once属性

<div data-aos="fade-up" data-aos-once="true"></div>

依此类推，检查这里的插件

更新：要使每个元素，显示在不同的持续时间，可以添加数据aos延迟

<div id="animate1" data-aos="fade-up" data-aos-once="true" data-aos-delay="500"></div>
<div id="animate2" data-aos="fade-up" data-aos-once="true" data-aos-delay="1000"></div>
<div id="animate3" data-aos="fade-up" data-aos-once="true" data-aos-delay="1500"></div>

从上面的示例可以看出，每个元件都有500毫秒的延迟

注意：确保首先初始化插件

<script>
    AOS.init();
</script>

AOS.init（）；

我不是想制作一个滑块，我只是想在用户到达该区域时制作它的动画，框1首先从右侧的不透明度0到1出现，类似地，所有这些都出现了boxes@Nimesh-根据您更新的问题更新了我的答案。请在滚动到该部分时帮助js number counter生效。机制是有两个带有静态数字的盒子。每当用户滚动到该分区编号时，应开始从1增加到框中的静态编号。我现在面临的问题是它会破坏宽度，在我应用此js库后会出现溢出，请左右滚动进行检查。我不尝试制作滑块，我只是想当用户来到这个区域时，框1会首先从右不透明度0到1出现，类似地，所有的都会出现boxes@Nimesh-根据您更新的问题更新了我的答案。请在滚动到该部分时帮助js number counter生效。机制是有两个带有静态数字的盒子。每当用户滚动到该部分编号时，应开始从1增加到框中的静态编号。我现在面临的问题是它会破坏宽度，在我应用此js库后会出现溢出，请左右滚动检查。我无法使其工作，它尝试通过css cdn和js cdn将其包含在内。但每当我在包含卡片细节的div中插入类时，它就会消失，也不会显示动画；如文档上所述？是的，我添加了AOS.init（）；在header中，它不起作用。您是否已将aos样式表添加到header中，并将其脚本添加到botto中