如何在我的滑块文本上添加过渡或淡入效果答案

【问题标题】：how to add transition or fade in out effect on my slider text如何在我的滑块文本上添加过渡或淡入效果
【发布时间】：2021-12-19 10:12:11
【问题描述】：

我希望当我向前点击时必须有一个过渡关于如何实现这一点。请帮助解决这个问题。它只是引导程序的正常滑块。我看到了对图像的影响，但对文本没有影响

.first1,.second,.first{
   background-color: teal;
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="style.css">
   <title>Slider</title>
</head>
<body>
   <div class="container">
      <div class="carousel slider" data-ride="carousel" id="carouselExampleControls" >
         <div class="carousel-inner">
            <div class="carousel-item active first1">
               <div class="text-center">
                  <p>hello1</p>
               </div>
            </div>
            <div class="carousel-item first">
               <div class="text-center">
                  <p>hello2</p>
               </div>
            </div>
            <div class="carousel-item second">
               <div class="text-center">
                  <p>hello3</p>
               </div>
            </div>
         </div>
         <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
      </div>
   </div>
</body>
</html>

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

我刚刚向active 类添加了一个简单的css 动画，因此该类被添加到下一张幻灯片中，文本从opacity:0 开始到opacity:1

.first1,.second,.first{
   background-color: teal;
}

.active p {
  opacity:0;
  animation-name:opacity;
  animation-duration:1s;
  animation-fill-mode:forwards;
}
@keyframes opacity {
  from {opacity:0;}
  to {opacity:1;}
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="style.css">
   <title>Slider</title>
</head>
<body>
   <div class="container">
      <div class="carousel slider" data-ride="carousel" id="carouselExampleControls" >
         <div class="carousel-inner">
            <div class="carousel-item active first1">
               <div class="text-center">
                  <p>hello1</p>
               </div>
            </div>
            <div class="carousel-item first">
               <div class="text-center">
                  <p>hello2</p>
               </div>
            </div>
            <div class="carousel-item second">
               <div class="text-center">
                  <p>hello3</p>
               </div>
            </div>
         </div>
         <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
      </div>
   </div>
</body>
</html>

【讨论】：

【解决方案2】：

p{
    opacity: 0; 
    animation: fadeInUp 500ms ease-in-out 0s both;
    animation-delay: 100ms;
}
@keyframes fadeInUp {
    from { 
          opacity: 0;
          transform: translate3d(0, 50%, 0);
         }
          
         to {
           opacity: 1;
           transform: none;
         }
}

【讨论】：