Why does this not transition while the height does change?

Asked Apr 01 '15 at 12:19

Active Apr 01 '15 at 12:19

Viewed 26 times

Why does this not transition while the height does change.

<div class="text-container">
    <div class="heading"><p>Foo</p></div>    
    <div class="story"><p>BAR BAR BAR BAR BAR BAR BAR </p></div>  
</div>

and the css:

.text-container {
    position: relative;
    overflow: hidden;
    margin: 10px;
    margin-right: 0;
    max-width: 300px;
    background: red;
    transition: all 0.2s cubic-bezier(0.320, 0.715, 0.470, 0.830);
}

.story {
    display: none;
}

.text-container:hover .story {
    display: initial;
}

fiddle:

https://jsfiddle.net/clankill3r/k00nhsbb/

asked Apr 01 '15 at 12:19

clankill3r

9,146
20
70
126

You can't transition the `display property` in CSS. You would have to transition the `opacity property.` – dowomenfart Apr 01 '15 at 12:22
Also you *really* don't want to use `display: initial` in any circumstance. See http://stackoverflow.com/questions/8228980/reset-css-display-property-to-default-value/8229026#8229026 – BoltClock Apr 01 '15 at 12:22
CSS is so poor designed. – clankill3r Apr 01 '15 at 12:27
@dowomenfart that doesn't work either https://jsfiddle.net/clankill3r/k00nhsbb/3/ – clankill3r Apr 01 '15 at 12:32
@clankill3r you have to take off the `display: block` and `display: none;` Try this out [jsfiddle](https://jsfiddle.net/k00nhsbb/5/) – dowomenfart Apr 01 '15 at 12:38

Why does this not transition while the height does change?

0 Answers0