CSS 动画平滑倒放问题

[fuxinya]

给一个 div 定义了一个动画，动画效果为：在 1 秒钟内，宽度从 10%增长到 100%

@keyframes myAnimation {
  from {
    width: 10%;
  }

  to {
    width: 100%;
  }
}

我想实现如下效果： 鼠标指针移动上去（ hover ），开始播放动画，宽度从 10%增长到 100%，鼠标移出，播放反转动画，宽度从 100%减少到 10%。

但是现在有个问题，当鼠标移上去时间不足 1s （宽度还没增长到 100%，假设此时宽度为 60%）就移出，此时的反转动画不是从当前位置（宽度 60%）反转，而是从 100%宽度开始反转播放，如何解决此问题？

[opengg]

你这需求应该用 transision

https://codepen.io/OpenGG/pen/MWqgvgp

[0703wzq]

chatGPT:可以使用 animation-fill-mode 属性来解决这个问题，将 animation-fill-mode 设置为 forwards ，这样动画就会在鼠标移出时保持当前的状态，而不是从 100%!开(MISSING)始反转播放。
```css
div {
animation: grow 1s linear;
animation-fill-mode: forwards;
}
@keyframes grow {
from {
width: 10%!!(MISSING);(MISSING)
}
to {
width: 100%!!(MISSING);(MISSING)
}
}
```

[opengg]

chatGPT

问：如何用 css 实现：鼠标移动到 div 上后，以平缓动画扩大到 100%宽度，移除 div 则以平缓动画缩小至 10%宽度

答：你可以使用 CSS 的 transition 属性，来实现这个效果。示例代码如下：

div {
width: 10%;
transition: width 1s ease;
}

div:hover {
width: 100%;
}

[pooorguy]

@opengg 好了，以前面向 Google 编程，现在是面向 chatGPT 编程

[enchilada2020]

@pooorguy 直接快进到让 ChatGPT 自己编程