I can't see my animation, instead I get something like show and hide effects ?

Question

I hope you're all doing fine, I am having a little funny problem, I will write my code and explain later what I want to achieve.

I have a CSS like this :

.content-container-title {
   text-align: center;
   width:40%;
   transition:2.5 all ease;
   margin:140px 30% 0 30%;
   opacity:0;
}

.titleShown {
    opacity:1;
}


.content-container-title h2 {
    font-family: cuisine;
    font-size:50px;
    margin:0;
    text-shadow: 0 0 5px 0 rgba(0,0,0,1);
}

 .content-container-text {
     text-align:center;
     width:50%;
     opacity:0;
     margin:20px 25%;
     transition:2.7 all ease;
     overflow:hidden;
 }

 .textShown {
     opacity: 1;
 }


.content-container-text p {
      margin:0;
      font-family: cuisine;
      font-size:24px;
      opacity: 0.8;
}

and HTML file like this

<div id="slider-container"></div>
<button onclick="show()">Click</button>

and my js file is :

 function show(){
 var elm = document.getElementById("slider-container");

 setTimeout(function(){
    sliders = [];
    sliders.push(stockSliders[index]); // this array contains only one 100% item

    contentSliders = "";
    for(let i=0; i<sliders.length; i++){
        contentSliders += '
          <div class="slider sliderShown absolute">
              <div class="img-container absolute">
                 <div class="img-content absolute">
                      <img src="'+stockSliders[index][3]+'" alt="">    
                 </div>
                 <div class="black-shadow absolute">
                 </div>
              </div>
             <div class="content-container absolute">'+
                '<div class="content-container-title">
                    <h2 class="c-white" >Lorem ipsum dolor sit amet.</h2>
                 </div>'+
                 '<div class="content-container-text">
                      <p class="c-white">Lorem ipsum dolor sit amet 
                                         consectetur adipisicing elit. 
                                         Debitis quas, id fuga dolorem 
                                         quaerat vero. Vitae expedita 
                                         nesciunt quis rem!
                      </p>
                  </div>
            </div>
        </div>';
        elm.innerHTML = contentSliders;
    }


    var paragraphs = document.getElementsByClassName("content-container-text");
    var titles = document.getElementsByClassName("content-container-title");

    setTimeout(function(){
        paragraphs[0].classList.add("textShown");
        titles[0].classList.add("titleShown");
    },5700)

},1300);

}

Now when I click my button, I want my divs ( content-container-text and content-container-title ) to be shown, and I get that, but I want it as a form of animation instead of just having it poping out, like hide and show effects, I have the css property ' transition 2.7s all ease ' in both divs targeted but I dont get what I wont, I hope my code and explanation were clear.

Any help would be much appreciated.

Answer 1

Change transition:2.5 all ease; to transition:2.5s all ease;