Why can't I get this simple transition to work?

HTML-CSS
1

Hi everyone.
I’m a beginner practicing some CSS transitions but I don’t know why I can’t seem to get this ‘div class=text’ transition to work.

https://codepen.io/Code_Blues/pen/vYgGeXQ

<div class="text">
  <h2>This</h2>
  <h3>Transition</h3>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Exer
    citationem doloribus ipsa molestias ratione excepturi qui
    dem, quos quasi. Harum quos ab nesciunt ducimus dicta. Id laudantium quaerat adipisci harum distinctio amet?
</p>
<a href="#">Hover</a>
</div>

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

.text.active{
  left:950px;
}

 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')
  })

Here is the codepen so someone can understand better,
https://codepen.io/Code_Blues/pen/vYgGeXQ
I’m trying to transition ‘div class=text’ easing to the right when ‘toggle’ is clicked but it doesn’t seem to work.

Can anyone help and tell me what Im doing wrong? I would be really greatful

Thank you

2

Add the property you want to transition to the selector with the initial value. I would also suggest you always specify which properties you are transitioning.

.text {
  position: absolute;
  left: 8%;
  z-index: 6;
  transition: left 0.9s ease;
}
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.