css3 从动画到正常状态的过渡答案

【问题标题】：css3 transition from animation to normal statecss3 从动画到正常状态的过渡
【发布时间】：2012-11-15 19:04:42
【问题描述】：

我有一个相当基本的“颜色脉冲”动画，当您将鼠标悬停在某物上时，它会从白色变为蓝色。这很好用，除了一件事——当我移开鼠标时，它会立即恢复为白色。我试图弄清楚如何让它变回白色，但到目前为止还没有运气。

手写笔代码：

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

【问题讨论】：

标签： css css-transitions css-animations

【解决方案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;
}

【讨论】：

谢谢，我没想到由于某种原因我需要在悬停时使用背景颜色 :)