给一个 div 定义了一个动画,动画效果为:在 1 秒钟内,宽度从 10%增长到 100%
@keyframes myAnimation {
from {
width: 10%;
}
to {
width: 100%;
}
}
我想实现如下效果: 鼠标指针移动上去( hover ),开始播放动画,宽度从 10%增长到 100%,鼠标移出,播放反转动画,宽度从 100%减少到 10%。
但是现在有个问题,当鼠标移上去时间不足 1s (宽度还没增长到 100%,假设此时宽度为 60%)就移出,此时的反转动画不是从当前位置(宽度 60%)反转,而是从 100%宽度开始反转播放,如何解决此问题?
1
opengg 2023-02-13 15:58:28 +08:00 1
|
2
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) } } ``` |
3
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%; } |
5
enchilada2020 2023-02-13 16:37:21 +08:00 via Android
@pooorguy 直接快进到让 ChatGPT 自己编程
|