Transition and transform not working [duplicate] - html

Question

This question already has answers here:
CSS3 transition doesn't work with display property [duplicate]
(7 answers)
Closed 4 years ago.
My code transition and transform is not works.
My CSS
div.panel {
display: none;
}
div.panel.show {
display: block !important;
}
.panel.show .text-light{
transform:translateY(10%);
background:red;
transition-delay:3s;
}
full code is here. Thanks for your help

Answer 1

Try this
div.panel .text-light{
width: 0;
height: 0;
opacity: 0;
}
div.panel.show .text-light{
width: 100%;
height: 100%;
opacity: 1;
}
.panel.show .text-light{
transform:translateY(10%);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
background:red;
}
The problem with your code was that you were applying transition to the element whose styles were not getting changed by the code you wrote. The transition will work only if there is some change in css on the element where you are applying the transition.

Answer 2

Transition animates the process of changing state1 to state1.
First of all you should set property transition and set which parameter to animate, how long. Then optional - type of animation(ease, ease-in-out so on), delay and more you can find here https://www.w3schools.com/cssref/css3_pr_transition.asp.
Then you need to change that property which you want to animate. For example
.animated {
background-color: #eee;
border: 2px dashed black;
border-radius: 5px;
width: 100px;
height: 100px;
/*
this is your transition for background-color
also you could set 'all' insted of propety which will animate any change of element
*/
transition: background-color .5s ease;
}
/* There is a second state which we want to apply a transition to */
.animated:hover {
background-color: #e6e;
}
<div class="animated">
Hover me
</div>