How to make smooth animation? – Blancer.com Tutorials and projects

I want to make smooth animation of appearing and disappearing a block of text. It appears smoothly but disappears very fast. How can I make it smooth?

Here is the CSS code:

.question-header > * {
  margin-bottom: 15px;
}

.question-header > * {
  margin-top: 20px;
}
.question-header {
  position: relative;
  border-bottom: 1px solid #e0e0e0;
}

.question-header.add-padding {
  padding-bottom: 30px;
}

.add-padding {
  padding-bottom: 30px;
}

.question-header h3 {
  width: 701px;

  font-weight: 600;
  font-size: 25px;
  line-height: 130%;
  color: #101828;
}

.plus-sign {
  position: absolute;
  right: 0;
  top: -20px;
  cursor: pointer;
}

.answer-to-questions.display {
  max-width: 630px;
  position: sticky;
  opacity: 1;
  transform: translateY(5%);
}

.answer-to-questions {
  position: absolute;
  opacity: 0;
  transform: translateY(-20%);
  transition: all 0.2s ease-in;
}

const answer = document.querySelector(".answer-to-questions");

const plusSign = document.querySelector(".plus-sign");

const questionHeader = document.querySelector(".question-header");

// plusSign.forEach((item)=>{

//     // item.addEventListener('click',()=>{
//     //     answer.classList.toggle('display');
//     // })

// })

plusSign.addEventListener("click", () => {
  answer.classList.toggle("display");
  questionHeader.classList.add("add-padding");

  if (answer.classList.contains("display")) {
    plusSign.src = "../images/plus-close.svg";
  } else {
    plusSign.src = "../images/plus.svg";
    questionHeader.classList.remove("add-padding");
  }
});

And my HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="question-header">
      <h3>Have you built an App similar to mine?</h3>
      <img class="plus-sign" src="./images/plus.svg" alt="" srcset="" />

      <div class="answer-to-questions">
        <p>
          Since 2010, we've successfully implemented 160+ projects for
          industries like E-Commerce, the Internet of Things, Digital music
          distribution, E-Learning, and many more. Since 2010, we've
          successfully implemented 160+ projects for industries like E-Commerce,
          the Internet of Things, Digital music distribution, E-Learning, and
          many more.
        </p>
      </div>
    </div>

    <script src="./script.js"></script>
  </body>
</html>

Here is the link to code sandbox https://codesandbox.io/s/cocky-monad-se1m22?file=/index.html:0-1010 .

Hopefully, I made this clear. Thank you everyone in advance!