1

I have a <table> inside of a <div> and I wanted my <div> to scale accordingly to my <table>. This <div> will only appear when I clicked on a button. When appearing, there should be a sliding transition. However, the transition disappears after I added display: table; to my CSS. 

input.toggle ~ div 
{ 
    transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620); 
}

input.toggle:checked ~ div 
{ 
    display: table;
}

The effect I am trying to apply is in this link: http://demosthenes.info/blog/506/HTML5-Window-Toggle-Events-In-Pure-CSS3

jl90
  • 639
  • 2
  • 10
  • 24
  • http://stackoverflow.com/questions/3331353/transitions-on-the-display-property – Josh Crozier Oct 04 '14 at 18:18
  • I don't understand what exactly should be transitioned. Besides, isn't the shorthand property of transition supposed to be `transition: property-name speed ease-mode, ...` ? – Antoine Combes Oct 04 '14 at 19:15
  • @JoshCrozier Thank you. However, the link you provided doesn't really helped me because the transition they are discussing on is opacity, where they can use visibility to solve the problem they had. – jl90 Oct 05 '14 at 05:47

1 Answers1

0

The problem here is that you have added a property which is not animatable on the element which you are trying to transition.

This causes the transition to cease to work.

See the spec - that display is not one of the animatable-properties

So you have to remove the display: table; rule from the input.toggle:checked ~ div class.

Stick to the code as proposed in the article - it works fine.

Danield
  • 121,619
  • 37
  • 226
  • 255
  • As mentioned, I wanted my
    to scale accordingly to the . That's the reason I am using display:table property. Is there any other way to do this so I can apply the transition?
     – jl90 Oct 05 '14 at 12:29