css3 transition from animation to normal state

css, css-animations, css-transitions

Solution

Use Transition on Hover Also

You need to combine a `transition` with your hover `animation`. See fiddle (in a webkit browser). In order for it to change `background` back to `#fff` it has to have first changed it from that to the pulse color `#88B1DA`, as the `transition` property does not trigger off the `animation` state of the element. By setting the `transition` to half the `animation` cycle time, it seems to be working smoothly for me no matter what point I exit the `hover` state from.

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

​

Problem

I have a fairly basic "color pulse" animation where when you hover on something it pulses from white to blue. This works fine except for one thing -- When I remove my mouse, it just reverts to white instantly. I'm trying to figure out how to get it to fade back to white, but no luck so far. stylus code: ``` @-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; ```

Original source