CSS element transition

Question

I have tried this construction in several browsers, and it not working. Please help to find my mistake.

<style>
.result{            
    width: 200px;
    height: 300px;
    background: #ff0000;
}           
.result #add{
    display:none;
}
.result:hover #add{
     -webkit-transition: top 1s ease-out 1.5s;
     -moz-transition: top 1s ease-out 1.5s;
     transition: top 1s ease-out 1.5s;
     display:block;
}
</style>

<div class="result">
    <div id="add">111</div>  
</div>

Answer 1

A few things to clean up first

1. You can't transition from display: none to display: block. Just can't happen. I would recommend transitioning opacity: 0 to opacity: 1 instead for a fade-in effect
2. Your transition: top 1s ease-out 1.5s call will only animate top attribute. That's what the top means in that line. You can add multiple targets via a comma delimited list, e.g. top 1s ease-out, opacity 1s ease-out etc. etc. Alternatively, you can just write the rule as transition: 1s ease-out and it will animate all changes (but this may have some minor performance hits as opposed to selecting the attributes to animate).
3. When using CSS transitions you must have an initial and a destination state or the animation won't work. An example in your code would be:

---

 .result{            
     width: 200px;
     height: 300px;
    top: 0;
    background: #ff0000;
}           
.result #add{
    opacity: 0;
    position: relative;
}
.result:hover #add{
     -webkit-transition: 1s ease-out 1.5s;
     -moz-transition: 1s ease-out 1.5s;
     transition: 1s ease-out 1.5s;
     opacity: 1;
     top: 40px;
}

And that, as written, should work for you.

Answer 2

3 issues:

• you're passing the top property into your transition top 1s ease-out 1.5s; but there's no top to refer to.
• Also you're not setting a position property for your #add element
• display:block; will trigger a fast redraw which will prevent the right CSS's calculations needed to apply the top transition - try with opacity instead

Here's all applied to an example:

.result{            
    width: 200px;
    height: 300px;
    background: #ff0000;
}           
.result #add{
  opacity: 0;
  position:relative;
  top:0;
}
.result:hover #add{
  opacity: 1;
   -webkit-transition: top 1s ease-out 1.5s;
      -moz-transition: top 1s ease-out 1.5s;
           transition: top 1s ease-out 1.5s;
  top:150px;
}

<div class="result">
    <div id="add">111</div>  
</div>