CSS 动画平滑倒放问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 657 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

  to {
    width: 100%;
  }
}

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

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

宽度

动画

反转

CSS

5 条回复 • 2023-02-13 16:37:21 +08:00

opengg

2023-02-13 15:58:28 +08:00

你这需求应该用 transision

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

0703wzq

2023-02-13 16:02:45 +08:00

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

2023-02-13 16:09:08 +08:00

chatGPT

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

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

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

div:hover {
width: 100%;
}

pooorguy

2023-02-13 16:35:48 +08:00 via Android

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

enchilada2020

2023-02-13 16:37:21 +08:00 via Android

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