Top Question smooth transition for changing display in accordion hover only with css

[Farhang Amaji]

I want to have accordion hover only with css, but I cant make a smooth transition

for changing display in

I have this html:

<div class="question">
                        <h3>
                            it is a question</h3>
                        <div class="answer">its an answer</div>
                    </div>

with this css

.chitawrapper .middle .main .Faq {
  width: 95%;
  padding: 4%;
  background-color: #00ced1;
  font-size: 1.5vw;
}
.chitawrapper .middle .main .Faq .question {
  width: 95%;
  padding: 4%;
  background-color: #f4a460;
  font-size: 1.5vw;
}
.chitawrapper .middle .main .Faq .question .answer {
  width: 95%;
  padding: 4%;
  background-color: BlueViolet;
  font-size: 1.5vw;
  width: 100%;
  display: none;
transition: all 5s ease-in-out;
}
.chitawrapper .middle .main .Faq .question h3 {
  width: 95%;
  padding: 4%;
  background-color: DodgerBlue;
  font-size: 1.5vw;
  width: 100%;
  margin: 0;
  padding: 2%;
}
.chitawrapper .middle .main .Faq .question h3:hover ~ .answer {
  display: block;
transition: all 5s ease-in-out;
}

note we are changing display: none; to display: block; with hover, accompanied with transition: all 5s ease-in-out;

then I tried to display: none; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 4s linear; to display: block; visibility: visible; opacity: 1; transition: visibility 0s, opacity 4s linear;

neither worked for me, so how can I make smooth transition for accordion hover only with css?

Answer for: "smooth transition for changing display in accordion hover only with css"...