CODEWITHSUNDEEP
htmlcsscss-transitionscss-animations
Shaoz
Shaoz

Reputation: 10653

Text shaking when using css transition and scale()

I have searched everywhere, including SO, but no one seems to find an answer. My issue is that when I hover an element using transform: scale(1.2) and opacity, the element grows, which is fine, but the text/content shakes or wiggles as it appears and scales.

Is there a way to stop the text from shaking/wiggling/flickering, as it's annoying and not UX friendly?

You can see an example here: http://jsfiddle.net/dv78etsv/

Many Thanks

Upvotes: 4

Views: 6343

Answers (2)

Harry
Harry

Reputation: 1

I had a similar problem, i tried:

box-sizing: border-box;

and it seemed to work.

Upvotes: 0

Dariusz Sikorski
Dariusz Sikorski

Reputation: 4407

You run a couple transitions at the same time, simply remove all the transitions and decide on one - for specific css property transition: opacity 1s

remove changing font-size on hover, and don't over-use transitions, those two should be enough:

.carte-sample {
    transition: transform 1s;
}
.carte-inner {
    transition: opacity 1s;
}

working example http://jsfiddle.net/dv78etsv/2/

Upvotes: 3

Related Questions