How To Add Transitions/effects To Display:block

I've a div like this: .x{ ... } And a sort of 'submenu' initially hidden: .x_submenu { ... display:none; ... } The submenu will be visible only when the user is on th

Solution 1:

The best option is with opacity:

HTML:

<p><b>Note:</b> This example does not work in Internet Explorer.</p><div></div><p>Hover over the div element above, to see the transition effect.</p>

Css:

div
{
opacity:0;
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
opacity:100;
width:300px;
}

see demo: http://jsfiddle.net/wyKyT/

Solution 2:

you won't be able to make transition work on 'display' property. You will have to achieve this using the 'opacity' property.

Related to :

• Transitions on the display: property
• -webkit-transition with display

Jim Jeffers explained :

To work around this always allow the element to be display block but hide the element by adjusting any of these means:

Set the heightto0.
Set the opacityto0.
Position the element outside of the frame of another element that has overflow: hidden.

and, for your transition, to make it 'cross-browser' :

.transition {
 -webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera     12.50+ */
}

Solution 3:

No, there is not. CSS transitions work only for scalar values, so they can be applied to properties dealing with dimensions, colors (as these are represented in rgb values as well), opacty, etc. Other values like display, float, font-family etc cannot be transitioned as there are no possible intermediate states to display. You will have to fall back to using JavaScript or try to work with properties like opacity or applying workarounds like height: 0 to height: 100px