July 8, 2013

CSS Transitions Not working after toggleClass()

85Ryan’s Question:

I created a toggle-menu, like the DEMO.

I add a css transition effect for div.nav-menu , and i used max-height:0; to max-height:480px; .

When click the menu toggle to show the menu, the transition was working good. But when I click the menu toggle to hide the menu again the transition didn’t work now.

What did I did wrong?

You are wrong about CSS Transitions. They do not animate when you add or remove class, It will only animate when you change the CSS properties. And You are directly adding and removing classes.

Here is your solution:

$( '.menu-toggle' ).on( 'click', function() {       
    if(nav.hasClass('toggled-on')) { 
         menu.css('maxHeight', 0); 
       //^ Here is changed the 'max-height` first so that the 
       //  Transition animation will trigger first
    nav.toggleClass( 'toggled-on' ); //Then only I toggled the class
} );

Updated Fiddle

February 27, 2013

CSS3 – Transition

Question by Wanny Miarelli

I ran into a little problem with CSS.
I’m following a book to learn CSS3 and I just discovered the function Transition.
So I decided to make an attempt to try and I can not figure out where I’m wrong, I hope you can help me.

This is my Index.html file

    <title>My Test</title>
    <link rel="stylesheet" type="text/css" href="main.css">

<div class="box"></div>
<div class="ssin"></div>


nothing special ! and this is the main.css

    height: 200px;
    width: 200px;
    background-color: #333333;

    height: 200px;
    width: 200px;
    background-color: red;

.box:hover .ssin{
    width: 500

i think the problem is around here …

.box:hover .ssin{
    width: 500;

if I go with the mouse. box does not happen anything, but instead should, theoretically, change the width of ssin

Can you help me ( i know its stupid, but am learning )

Sorry for my bad eng.

Thank you

Answer by Jeremy T

In the HTML you have posted there, ssin is not inside box. .box:hover .ssin selects something with the class ssin inside box. I believe what you want here is the adjacent sibling selector: .box:hover + .ssin

Answer by Starx

Since you are trying to look into CSS3 Transition, I will assume you are trying to increase the size of the box. SO, your markup is slightly wrong. The ssin should be inside the .box

<div class="box">
    <div class="ssin"></div>

And add the transition css to your code

.ssin {
    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
            transition: all 0.5s linear;
April 15, 2012

CSS3 move then animate

Question by Paul Thompson

I am trying to animate my pages using css3 transitions.
I need to be able to move an element and then animate using css3.
For instance move a hidden div off the screen and then animate it back on the screen.
Sounds strange I know but I have simplified my explanation and really do need this functionality. So in the code below I want to move the element 400px left and then animate it to 0. So….no animation move 400px, add CSS3 transition class and animate to 0px. Hope I have explained it ok…thanks for any help.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My test page</title>
<style type="text/css">
        -webkit-transition: all 1.5s ease;
        -moz-transition: all 1.5s ease;
        transition: all 1.5s ease;
<script type="text/JavaScript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">


<div class="box">1</div>

Answer by Starx

I think this should do


Please fill the form - I will response as fast as I can!