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

在悬停时也使用过渡

你需要结合一个 transition悬停 animation . See fiddle (in a webkit browser) .为了让它改变background返回 #fff它必须首先将其从那个更改为脉冲颜色 #88B1DA ，作为 transition属性不会触发 animation元素的状态。通过设置 transition减半animation循环时间，无论我在什么时候退出 hover，它似乎对我来说都很顺利。状态从。

@-webkit-keyframes pulse {
    0% { background: #FFF;}
    50% { background: #88B1DA;}
    100% { background: #FFF;}
}

.scaffolding {
    background:    #FFF;
    -webkit-transition: background 1s linear;
}
.scaffolding:hover {
    background:    #88B1DA;
    -webkit-transition: background 1s linear;
    -webkit-animation: pulse 2s linear infinite;
}