I have 4 "A" elements being displayed inline in a div, and I want to make it so that when one is hovered on, its size increases slightly in a smooth manner, and when the mouse is no longer hovering it will smoothly go back to its normal size.
I managed to make the hover smoothly increase the element’s size, but whenever I stop hovering, it snaps back to normal without animation. How would I go about fixing this? Here’s a simple version of what I have.
<!DOCTYPE html>
<style>
div {
display: inline-block;
text-align: center;
}
a {
margin: 0 5px;
font-size: 20px;
}
a:hover {
text-shadow: 0 0 0px #fff;
animation: aHover ease 0.3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes aHover {
0% {
font-size: 20px;
}
100% {
font-size: 25px;
}
}
</style>
<div>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
</div>
>Solution :
You might use transition instead of animation.
Also I’d suggest transitioning transform:scale3d instead of font-size. As it works in composition and won’t cause reflow and repaint, thus less laggy.
div {
display: inline-block;
text-align: center;
}
a {
display: inline-block;
margin: 0 5px;
font-size: 20px;
transition: transform .3s;
}
a:hover {
transform: scale3d(1.25, 1.25, 1);
}<div>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
</div>