CSS3过渡填充模式

Question

是否有任何方法/技巧让转换保持其状态就像动画填充模式一样？

<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将始终返回其原始状态。

Answer 1

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

Answer 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; }
}

ckeck是否有效： jsbin

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