how can I make an animation ease in smoothly, but also out smoothly?-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

I'd recommend using transition instead of @keyframes:

div {
  display: inline-block;
  text-align: center;
}
a {
  margin: 0 5px;
  font-size: 20px;
  transition: font-size .3s linear;
}
a:hover {
  font-size: 25px;
  transition: font-size .3s linear;
  text-shadow: 0 0 0px #fff;
}

<div>
    <a>1</a>
    <a>2</a>
    <a>3</a>
    <a>4</a>
</div>

The transition on the a:hover determines the transition from normal to the hover state, and the transition on the (normal)a determines the transition from the hover state back to normal.