Question

I have this code for a banner that will reveal a drop down section when hovered over:

The HTML code below:

<div id="top_wrapper" class="hori_wrapper wrapper">
    <div id="top" class="hori_banner banner"></div>
    <div id="top_reveal" class="hori_reveal reveal"></div>
</div>

And the CSS:

.wrapper {
border: dashed;
position: relative;
}

.banner {
background: blue;
position: relative;
}

.reveal {
background: red;
position: absolute;
z-index: 1;
}

.hori_wrapper {
width: 300px;
height: 50px;
clear: both;
}

.hori_banner {
width: 300px;
height: 50px;
}

.hori_reveal {
width: 300px;
height: 0px;
}

#top:hover + #top_reveal, #top_reveal:hover {
-webkit-transition: height 1s ease-in .5s;
-o-transition: height 1s ease-in .5s;
-moz-transition: height 1s ease-in .5s;
-transition: height 1s ease-in .5s;
height: 300px;
top: 50px;
}

Basically, what I’d like to know is: how does CSS determine that it should animate downwards and not some other direction?

Thanks!

Answer 1

All that happens is that it transitions to what would happen if the property was set normally.

In other words, if the height was 300px, and the top was 50px, what would it look like?

It’s nothing more complex like that, and is why for browsers that don’t support transitions things still work, just with no animation.