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