how to add transition or fade in out effect on my slider text-CodePudding

I want when I click back forward there must be a transition on how to achieve this. Please help regarding this. It is just the normal slider of bootstrap. I have seen the effect on image but not on text

.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>

CodePudding user response：

I have just added a simple css animation to the active class so one the class is added to the next slide the text start from opacity:0 to 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>

CodePudding user response：

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;
         }
}