Adding transition effect to my css

Question

I currently have the following

HTML

<div id="left_nav_wrapper">

   <div class="sidebar_wrapper">
      <div class="sidebar_header">Header</div>
      <div class="sidebar_content">Content</div>
   </div>
   <div class="sidebar_wrapper">
       <div class="sidebar_header">Header</div>
       <div class="sidebar_content">Content</div>
   </div>

</div>

CSS

.sidebar_wrapper { width: 150px;  }
.sidebar_header { width: 150px; background-color: #F18986;  }
.sidebar_content { display: none; width: 150px; margin-left: -150px; background-color: #444; }
.sidebar_header:hover + .sidebar_content { display: inherit; margin-left: 0px; }

I want when they hover over the header, the content shows (which I have done) now I want to add a transition so it slides in, when I

add transition: all 1s;
-webkit-transition: all 1s;

to the css it does not do anything, I have added it to the .sidebar_header and .sidebar_content and can not figure out why it will not use the transition when appearing.

Any help would be appreciated THANKS!

check this, he is using opacity, display doesn't work with transitions. http://stackoverflow.com/questions/3331353/transitions-on-the-display-property — bradcush, Oct 07 '13 at 17:09

score 1 · Accepted Answer · edited Oct 07 '13 at 17:12

Transitions do not work on display property. You have to set properties like height: 0 to 100px like i have done here.

.sidebar_content {
    height: 0;
    width: 150px;
    margin-left: -150px;
    background-color: #444;
    -moz-transition: height 0.5s ease-in;
    -o-transition: height 0.5s ease-in;
    -webkit-transition: height 0.5s ease-in;
    transition: height 0.5s ease-in;
}

.sidebar_header:hover + .sidebar_content {
    height: 100px;
    margin-left: 0px;
}

You cannot transition to height auto. In the case you don't want to fix the height of sidebar_content

You have to do transition on max-height property by setting it to a very high value that it never reaches. But it do have its consequences. You will have to adjust the transition duration to remove the delay when the max-height transitions from 0 to that high value.

As the maximum value of the max-height increases your reverse transition will be delayed

score 0 · Answer 2 · answered Oct 07 '13 at 17:13

Remove display: none; from .sidebar_content as your transition will not have an effect on it.
Use height: 0 to hide the element, as setting it to display: none will disable the transition.
Set .sidebar_wrapper to overflow: hidden to hide the portion of the .sidebar_content that hasn't reached the final position.

CSS

.sidebar_wrapper { width: 150px;  }
.sidebar_header { width: 150px; background-color: #F18986; overflow: hidden; }
.sidebar_content { height: 0; width: 150px; background-color: #444; margin-left: -150px;
transition: all 1s linear; -webkit-transition: all 1s linear; }
.sidebar_header:hover + .sidebar_content { height: auto; margin-left: 0px; }

DEMO: http://jsfiddle.net/MLPLs/

score 0 · Answer 3 · answered Oct 07 '13 at 17:17

You can't use transition with this. However you can use animation of CSS3 with this :

sidebar_header:hover + .sidebar_content 
{
    display: block;
    animation: fadein 2s;  
    -webkit-animation: fadein 2s;   
    animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards; 
}

@-webkit-keyframes fadein
{  
   from   {opacity:0;}
   to {opacity:1;margin-left:0;}
}

@keyframes fadein
{  
   from   {opacity:0;}
   to {opacity:1;margin-left:0;}
}

the animation-fill-mode = the target will retain the computed values set by the last keyframe encountered during execution

This way you can still use display: none; to completely get rid of the element.

Here a demo.

score 0 · Answer 4 · answered Oct 07 '13 at 17:17

transition do not work for display, you must do like this:

jsFiddle is here

HTML:

<div id="left_nav_wrapper">
  <div class="sidebar_wrapper">
    <div class="sidebar_header">Header</div>
    <div class="sidebar_content">Content</div>
  </div>
  <div class="sidebar_wrapper">
    <div class="sidebar_header">Header</div>
    <div class="sidebar_content">Content</div>
  </div>
</div>

CSS:

.sidebar_wrapper {
    width: 150px;
    overflow: hidden;
}
.sidebar_header {
    width: 150px;
    background-color: #F18986;
    position: relative;
    z-index: 3
}
.sidebar_content {
    width: 150px;
    display: block;
    margin-top: -20px;
    -webkit-transition: all 1s;
    position: relative;
    z-index: 1;
    background-color: #444;
}
.sidebar_header:hover + .sidebar_content {
    display: inherit;
    margin-top: 0px;
}

Adding transition effect to my css

4 Answers4