Transition not working for translate3d

Question

I have the following code. When I click the toggle button, the push-wrap is supposed to slide to the right in 1 second. But the transition property doesn't seem to work.

 $('.btn').click(() => { $('body').toggleClass('showNav') return false }) 

 html, body { margin: 0; padding: 0; } .site-wrap { width: 100%; height: 100%; overflow: hidden; } nav { position: fixed; top: 0; left: 0; width: 300px; height: 100%; } h1 { margin: 0; } .push-wrap { background: #fff; width: 100vw; height: 100vh; transition: translate3d 3s ease 0; transform: translate3d(0, 0, 0); } .showNav .push-wrap { transform: translate3d(300px, 0, 0); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="site-wrap"> <nav> <ul> <li>nav 1</li> <li>nav 2</li> <li>nav 3</li> <li>nav 4</li> </ul> </nav> <div class="push-wrap"> <h1>Hello</h1> <button class="btn">toggle</button> </div> </div> 

Answer 1

Add transition-duration: 1s; to this css

.showNav .push-wrap {
  transform: translate3d(300px, 0, 0);
  transition-duration: 1s;
}

 $('.btn').click(() => { $('body').toggleClass('showNav') return false }) 

 html, body { margin: 0; padding: 0; } .site-wrap { width: 100%; height: 100%; overflow: hidden; } nav { position: fixed; top: 0; left: 0; width: 300px; height: 100%; } h1 { margin: 0; } .push-wrap { background: #fff; width: 100vw; height: 100vh; transform: translate3d(0, 0, 0); } .showNav .push-wrap { transform: translate3d(300px, 0, 0); transition-duration: 1s; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="site-wrap"> <nav> <ul> <li>nav 1</li> <li>nav 2</li> <li>nav 3</li> <li>nav 4</li> </ul> </nav> <div class="push-wrap"> <h1>Hello</h1> <button class="btn">toggle</button> </div> </div>