CODEWITHSUNDEEP
htmlcssfirefoxcss-transitions
Madness
Madness

Reputation: 638

CSS transition, position keeps moving on hover

I have a simple css transition on the right property for a button which simply moves an arrow when you hover. The problem is that when you hover, it's not transitioning properly and if you refresh (or re-run) the JSFiddle, then you will notice that the arrow moves position after hovering.

It's like it moves back, then forwards then back again?

This appears to only happen in Firefox.

JSFiddle

Upvotes: 2

Views: 3862

Answers (2)

Tanasos
Tanasos

Reputation: 4098

How about using a more subtle approach by using CSS pseudo elements:

.genericBtn {
  background: #ffffff;
  color: #c40009;
  border: 1px solid #c40009;
  font-size: 20px;
  margin: 10px 0 0;
  padding: 20px 50px 20px 30px;
  width: 300px;
  position: relative;}

.genericBtn::after {
  content: ">";
  position: absolute;
  right: 37%;
  transition: all .3s ease-in;
}

.genericBtn:hover::after {
  transform: translate(10px,0); }

Here is a Fiddle

Upvotes: 5

Narxx
Narxx

Reputation: 8299

Found the problem. Your span is inline, and giving it position: relative caused the issue.

Simply change to inline-block and you're good to go:

.genericBtn span {
  display: inline-block;
  position: relative;
}

Upvotes: 12

Related Questions