V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
fuxinya
V2EX  ›  前端开发

CSS 动画平滑倒放问题

  •  
  •   fuxinya · 2023-02-13 15:41:16 +08:00 · 1187 次点击
    这是一个创建于 638 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    5 条回复    2023-02-13 16:37:21 +08:00
    opengg
        1
    opengg  
       2023-02-13 15:58:28 +08:00   ❤️ 1
    你这需求应该用 transision

    https://codepen.io/OpenGG/pen/MWqgvgp
    0703wzq
        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)
    }
    }
    ```
    opengg
        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%;
    }
    pooorguy
        4
    pooorguy  
       2023-02-13 16:35:48 +08:00 via Android
    @opengg 好了,以前面向 Google 编程,现在是面向 chatGPT 编程
    enchilada2020
        5
    enchilada2020  
       2023-02-13 16:37:21 +08:00 via Android
    @pooorguy 直接快进到让 ChatGPT 自己编程
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1055 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 19:53 · PVG 03:53 · LAX 11:53 · JFK 14:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.