CSS3过渡填充模式

debugcn 发表于 Dev

尤里亚姆·钱德拉

是否有任何方法/技巧可以像动画填充模式一样使过渡保持其状态？

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

扬·米斯克（Jan Misker）

不，不可能为此使用过渡。CSS过渡仅在样式之间进行过渡（因此命名）。如果要保持状态，则必须添加一个类，对此始终需要JavaScript。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。