CODEWITHSUNDEEP
htmlcssfirefoxanimationtransform
Sunny
Sunny

Reputation: 2332

Text "nudging" itself after css animation

I'm having trouble making my animation rotate smoothly. After the element finishes rotating, you can see the text "pop" slightly to the left. Depending on the font-size this may or may not happen, but I'm hoping to find a way to solve this without having to set an exact font-size (because the fallback fonts are not the same size and will have the same problem). It also depends on the browser, it appears ok in Chrome, but in FireFox you can see this clearly.

Try this in FireFox: http://jsfiddle.net/SGVNr/ Can you see the text nudge left (on the bottom box)?

div {
    height: 100px;
    width: 100px;
    margin: 30px;
    background: blue;
    font: 29px/100px Arial, sans-serif;
    color: #fff;
    text-align: center;
}

#good {
    font-size: 30px;
}

div:hover {
    -webkit-animation: move 0.7s ease-out forwards;
    -moz-animation: move 0.7s ease-out forwards;
    animation: move 0.7s ease-out forwards;
}

@-webkit-keyframes move {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(90deg); }
}

@-moz-keyframes move {
    0% { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(90deg); }
}

@keyframes move {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(90deg); }
}

Upvotes: 2

Views: 1034

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25974

If you remove the ID from the top and give it to the bottom it fixes the problem. Therefore, give both elements font-size:30px using a class it fixes your issue

Demo Here

EDIT

After a good bit of investigation and testing, I found that 21, 22, 25, 27, 30, 33, 34, 36, 39, 41, 43, and 45px font-size (I only tested 20-45px) all worked as you want them to with no jump left after the rotation. This behavior was true no matter what other attributes I added/removed from the style. This hints to me that it is due to some weird rendering issue with Firefox You might report it on the Firefox forums

Upvotes: 2

Related Questions