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. stackoverflow.com/questions/3331353/… — bradcush
– bradcush, Commented Oct 7, 2013 at 17:09

Josh Crozier · Accepted Answer · 2013-10-07 17:12:31Z

1

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

edited Oct 7, 2013 at 17:12

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

answered Oct 7, 2013 at 17:07

Arun Aravind

1,33810 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Axel · Accepted Answer · 2013-10-07 17:13:06Z

0

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/

answered Oct 7, 2013 at 17:13

Axel

10.8k2 gold badges32 silver badges43 bronze badges

Comments

nkmol · Accepted Answer · 2013-10-07 17:17:11Z

0

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.

answered Oct 7, 2013 at 17:17

nkmol

8,1193 gold badges34 silver badges55 bronze badges

Comments

Mohsen Safari · Accepted Answer · 2013-10-07 17:17:54Z

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;
}

Collectives™ on Stack Overflow

Adding transition effect to my css

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related