Why can’t I get this simple CSS transition to work?

Question

I'm trying to learn and practice CSS transitions but I don't know why I can't get this div class=text transition to work.

 const menuToggle = document.querySelector('.toggle') const showCase = document.querySelector('.showcase') const text = document.querySelector('.text') menuToggle.addEventListener('click', () => { menuToggle.classList.toggle('active') showCase.classList.toggle('active') text.classList.toggle('active') })

 .text { position: absolute; z-index: 6; transition-duration: 0.9s; transition-timing-function: ease; }.text.active { left: 950px; }

 <div class="text"> <h2>This</h2> <h3>Transition</h3> <p> Lorem </p> <a href="#">Hover</a> </div>

Here is the codepen so see the full picture https://codepen.io/Code_Blues/pen/vYgGeXQ

I'm trying to transition the div class=text easing to the right when the menu toggle is clicked but it doesn't seem to work.

Can anyone help and tell me what I seem to be doing wrong? I would be really grateful.

Thank you very much.

Answer 1

One possible solution for you is using transform: translate functions.

For example, Try something like that instead you current.text.active class.

.text.active{ transform: translateX(400px) }

Answer 2

Just simply add left: 100px; to .text .

. . .

.text {
  position: absolute;
  z-index: 6;
  transition-duration: 0.9s;
  transition-timing-function: ease;
  left: 100px;
}

.text.active {
  left: 950px;
}

. . .

Check it in action on codepen

---

You need to provide .text with an initial position. Now if you will add left: 0; it will start from the complete start of the window.

And overall you have added a 100px padding to the .showcase section . So we will add add left: 100px; to make the text align with other elements.

---

With left: 0; :

With left: 100px; :

Answer 3

You can define different values for transition properties like height.

.text{
  position: absolute;
  z-index: 6;
  height: 300px;
  transition-duration: 2s;
  transition-timing-function: ease;
  
}

.text.active{
  height: 10px;
  left:950px;
}