CSS3从动画过渡到正常状态

Question

我有一个相当基本的“颜色脉冲”动画，当您将鼠标悬停在某个东西上时，它会从白色变成蓝色。除一件事外，此方法工作正常-当我卸下鼠标时，它会立即恢复为白色。我试图弄清楚如何使其褪色为白色，但到目前为止还没有运气。

手写笔代码：

@-webkit-keyframes pulse
    0%
        background #FFF
    50%
        background #88B1DA
    100%
        background #FFF

.scaffolding
    background    #FFF
    transition    background 0.5s linear

    &:hover
        animation pulse 2s linear infinite;

Answer 1

还可以在悬停时使用过渡

\n\n

您需要将 atransition与悬停结合起来animation。请参阅 fiddle （在 webkit 浏览器中）。为了让它变background回原来的颜色，#fff必须首先将其从原来的颜色更改为脉冲颜色#88B1DA，因为该transition属性不会触发animation元素的状态。通过将周期时间设置transition为一半animation，无论我在什么时候退出，它似乎都能顺利工作hover从哪个点退出该状态，它似乎都可以顺利工作。

\n\n

@-webkit-keyframes pulse {\n    0% { background: #FFF;}\n    50% { background: #88B1DA;}\n    100% { background: #FFF;}\n}\n\n.scaffolding {\n    background:    #FFF;\n    -webkit-transition: background 1s linear;\n}\n.scaffolding:hover {\n    background:    #88B1DA;\n    -webkit-transition: background 1s linear;\n    -webkit-animation: pulse 2s linear infinite;\n}\n

\n\n

\xe2\x80\x8b

\n