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>

Display property can't be animated with transition instead you can use opacity. — DaniP
– DaniP, Commented Oct 29, 2014 at 14:11
I'm going to add this as a comment, as most answers seem to miss this: you need to move your transitions to the initial state, or you will not experience a smooth transition once you are no longer hovering over the element. — disinfor
– disinfor, Commented Oct 29, 2014 at 14:28

Josh Burgess · Accepted Answer · 2014-10-29 14:30:59Z

2

A few things to clean up first

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
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).
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.

edited Oct 29, 2014 at 14:30

answered Oct 29, 2014 at 14:17

Josh Burgess

9,6071 gold badge35 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

disinfor Over a year ago

If you want the transition to fade back as well, you need to put the transition into the initial state, not the hover state. jsfiddle.net/disinfor/rca3qbyn

disinfor Over a year ago

You also need to add positioning of absolute to the #add or it won't respond to top. I updated the fiddle: jsfiddle.net/disinfor/rca3qbyn/1 :)

Josh Burgess Over a year ago

Good catch, moved that from .result to .result #add

disinfor Over a year ago

+1 Sorry for getting picky on your answer, but it was the most comprehensive for the initial list you gave and should be the accepted answer.

Josh Burgess Over a year ago

@disinfor - Totally understandable and I appreciate it, thanks!

Roko C. Buljan · Accepted Answer · 2014-10-29 14:16:46Z

1

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>

edited Oct 29, 2014 at 14:16

answered Oct 29, 2014 at 14:10

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Collectives™ on Stack Overflow

CSS element transition

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related