我怎样才能使动画平滑地缓入，又平滑地缓出？答案

【问题标题】：how can I make an animation ease in smoothly, but also out smoothly?我怎样才能使动画平滑地缓入，又平滑地缓出？
【发布时间】：2023-01-08 02:18:40
【问题描述】：

我在一个 div 中内联显示了 4 个“A”元素，我想让它在一个悬停时，它的大小以平滑的方式稍微增加，当鼠标不再悬停时它会平滑地返回到正常大小。

我设法使悬停平滑地增加了元素的大小，但每当我停止悬停时，它就会恢复正常而没有动画。我将如何解决这个问题？这是我所拥有的一个简单版本。

<!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>

【问题讨论】：

使用过渡而不是关键帧动画。

标签： html css

【解决方案1】：

使用transition：

div {
  display: inline-block;
  text-align: center;
}

a {
  margin: 0 5px;
  font-size: 20px;
  transition: font-size .3s;
}

a:hover {
  font-size: 25px;
}

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

【讨论】：

【解决方案2】：

我建议使用 transition 而不是 @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>

a:hover上的transition决定了transition从正常到悬停状态，(normal)a上的transition决定了transition从悬停状态恢复正常。

【讨论】：