CSS3 过渡填充模式答案

【问题标题】：CSS3 Transition Fill ModeCSS3 过渡填充模式
【发布时间】：2022-02-12 21:41:17
【问题描述】：

有什么方法/技巧可以让过渡保持其状态，就像动画填充模式一样？

<style>
    #firstdiv {
        width: 100px;
        height: 100px;
        background: red;
        animation: firstdivframe 2s;
        animation-play-state: paused;
        animation-fill-mode: forwards;
    }

    #firstdiv:hover {
        animation-play-state: running
    }

    @keyframes firstdivframe {
        from { background: red; }
        to { background: yellow; }
    }

    #seconddiv {
        width: 100px;
        height: 100px;
        background: red;
        transition: background 2s;
    }

    #seconddiv:hover {
        background: yellow;
    }
</style>

<div id="firstdiv"></div>
<br />
<div id="seconddiv"></div>

jsbin

基于上面的代码，我希望 seconddiv 的行为就像 firstdiv 一样，而不使用任何 javascript 代码。当鼠标停止悬停或动画结束时，firstdiv 将保持其状态，而 seconddiv 将始终返回其原始状态。

【问题讨论】：

简答：关键帧和动画将完成您的工作。

标签： css css-transitions css-animations

【解决方案1】：

不，不能为此使用过渡。 CSS 过渡只会在样式之间过渡（因此得名）。如果你想保持一个状态，你必须添加一个类，你总是需要 JavaScript。

【讨论】：

【解决方案2】：

我认为这就是你要找的东西

#firstdiv {
    width: 100px;
    height: 100px;
    background: red;
    animation: firstdivframe 2s;
    animation-play-state: paused;
    animation-fill-mode: forwards;
}

#firstdiv:hover {
    animation-play-state: running
}

@keyframes firstdivframe {
    from { background: red; }
    to { background: yellow; }
}



#seconddiv {
    width: 100px;
    height: 100px;
    background: red;
     animation: seconddiv 2s;
    animation-play-state: paused;
    animation-fill-mode: forwards;
}

#seconddiv:hover {
    animation-play-state: running
}

@keyframes seconddiv {
    from { background: red; }
    to { background: yellow; }
}

检查是否有效：jsbin

请告诉我这是否是您正在寻找的内容，然后我将为您提供更“技术最佳”的解决方案，并在每一行中进行解释。（我目前无法发表评论）。

【讨论】：

你完全去掉了过渡，风格和firstdiv的风格一致
你到底想做什么你的CSS？您想要另一种方式来为 seconddiv 执行“动画填充模式”吗？

【解决方案3】：

是的，当然！想想 setTimeout！您可以使用与过渡时相同的持续时间 setTimeout！而setTimeout的回调函数应该设置你想要保留的样式！

【讨论】：

欢迎来到 StackOverflow。虽然您的热情是积极的，但请注意在本网站上使用全大写字母和标点符号。尽管您自己可能有良好的意图，但这种语法可能会被他人解释为粗鲁或居高临下。