css - 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

在悬停时也使用过渡

您需要将 atransition与悬停结合起来animation。请参阅小提琴（在 webkit 浏览器中）。为了让它变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;
}

​</p>