-1

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

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
dedi wibisono
  • 511
  • 5
  • 12
  • 23
  • 1
    You can't apply transitions on a `display: none` element. Ps: the code in question really doesn't reflect the one in fiddle, please correct that. – Kaiido Apr 18 '18 at 07:00

2 Answers2

2

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.

Nandita Sharma
  • 13,287
  • 2
  • 22
  • 35
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>
Sergey
  • 7,184
  • 13
  • 42
  • 85