CSS 3 - Get transition on property : display - html

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!

Answer 1

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

Answer 2

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