smooth animation using css3 transition - css-transitions

Question

I have add a font awesome user icon in an element. When I hover on that element I want the icon size to be decreased thoroughly. So I have used transition as "all 0.5s ease". It works but it animated step wise. Can it possible to animate the icon smoothly.

Answer 1

The problem you have is that as the text reduces in size, so does the hover target, which means the text can reach a point where you are no longer hovering and so it starts to grow again. This is likely to cause a nasty visual jaggy effect.
In the below example, the first example uses "focus" which isn't affected by the change in size. The second uses "hover", which is highly likely to be affected.
Click or tab onto example one and it will resize smoothly. Try to hover on example two and it will be horrible.
You can solve this by having a hover target that remains a constant size, so isn't reduced during the animation.
Other common causes for jagginess in this particular area (resizing text) are:
If the browser struggles to render the font during the resize
If the before and after sizes are not far apart and the animation has a long duration
If the before an after sizes are very far apart and the animation is has too short a duration
div {
font-size: 5em;
transition: font-size 0.5s ease;
}
div:focus {
font-size: 0.5em;
}
p {
font-size: 5em;
transition: font-size 0.5s ease;
}
p:hover {
font-size: 0.5em;
}
<div tabindex="0">
Example One
</div>
<p>
Example Two
</p>