CSS transition not smooth

Question

Good Day

I am using the CSS transition effect on a hover selector, but the 2nd part of the transition is not smooth - When I hover over the element, it moves smoothly. When I exit hover, the element drops back non-elegantly (not smooth/timed). How do I fix it?

#login{ margin-top: -10px; margin-left: 10px; display: inline-block; } #login:hover { margin-top: 0px; -webkit-transition: margin-top 0.2s ease-out; -moz-transition: margin-top 0.2s ease-out; -o-transition: margin-top 0.2s ease-out; -ms-transition: margin-top 0.2s ease-out; } #login a{ background: #003399; font-size: 38px; color: #fff; }

<div id="login" class="span1"> <a href="#">login</a> </div>

NOTE: look at my JSFIDDLE to see what I mean

Raffael · Accepted Answer · 2013-02-20 11:55:13Z

As soon as you leave the div the :hover pseudo class is no longer satisfied. Thus the div loses the transition properties.

Simply move the transition block from #login:hover to #login and you are done.

thanks man. Appreciate. You were first so I'll give you the points

laruiss · Accepted Answer · 2020-06-01 08:31:35Z

You have to define also transition to normal state.

Edit: Like Raffael said it is only necessary to define transition effect in normal state

#login{ margin-top: -10px; margin-left: 10px; display: inline-block; -webkit-transition: margin-top 0.2s ease-out; -moz-transition: margin-top 0.2s ease-out; -o-transition: margin-top 0.2s ease-out; -ms-transition: margin-top 0.2s ease-out; } #login:hover { margin-top: 0px; } #login a{ background: #003399; font-size: 38px; color: #fff; }

<div id="login" class="span1"> <a href="#">login</a> </div>

DEMO

Collectives™ on Stack Overflow

CSS transition not smooth

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related