CSS 3 - Get transition on property : display

Question

i got a little question when using the transition-effect with the property display:

I am testing on Safari:

input.input_field {
    display:none;
    transition-property: display;
    transition-duration: 2s;
    -webkit-transition-property: display; /* Safari */
    -webkit-transition-duration: 2s; /* Safari */
}
input.input_field_active {
    display:block;
}

But this example doesnt work for now, anybody knows why i cant use the the property : display??

Greetings!

Depends on what you are trying to do. If you need a fade-in effect look at `opacity`. — Sebastian, Apr 27 '14 at 13:29
http://stackoverflow.com/questions/3331353/transitions-on-the-display-property Check this link hope you will get solution from this. — Vinita Rathore, Apr 27 '14 at 13:30

SW4 · Answer 1 · 2014-04-27T13:35:42.073

You can only perform a transition on a scalable property, i.e. a numerically defined property (which may or may not have units of measurement) which exists within a range for which any two points are related. The reason for this is that in order to perform a transition the browser takes the starting point and ending point provided then extrapolates the interim keyframes- producing the resulting animation.

The display property is not scalable, it is simply 'on' or 'off', indeed more specifically it has a number of properties which arent related on any form of scale. As such, the interim values cannot be extrapolated. You can also look at it like this, display is also a layout and not visual style- although it does have visual connotations. You can only perform transitions on visual styles.

Depending on what your requirements are, you can perform a transition on opacity or height (or width).

Demo Fiddle of alternate transitions

score 0 · Answer 2 · answered Apr 27 '14 at 13:39

You can use a combination of visibility in place of display and the use opacity as a fade effect.

visibility is transtionable although it also only has an on / off state BUT you can use a transition delay to affect it.

JSFiddle Demo

HTML

<button>Hover</button>

<div class="wrap">


</div>

CSS

.wrap {
    width:100px;
    height:100px;
    border:1px solid grey;
    background-color: #bada55;
    margin-top: 25px;
    visibility:hidden;
    opacity:0;
    transition: visibility 0s linear 0.5s,
                opacity 0.35s linear;
}

button:hover + .wrap {
  visibility:visible; /* show it on hover */
  opacity:1;
  transition-delay:0; 
}

CSS 3 - Get transition on property : display

2 Answers2

Demo Fiddle of alternate transitions