Question

I have a question regarding CSS3 animations/transforms. Typically, I can always find my way around CSS3 – as it’s so simple, but this one has been giving me trouble.

What I have is a picture of a plus sign. When the user hovers over the plus sign, it rotates 360 degrees and the picture changes to a minus sign. Everything’s working well, except when the animation finishes it reverts quickly back to the plus sign; I want it to stay on the minus sign until the mouse hovers out, then it can go back to the plus sign.

Here’s my code:

#lock-screen #time-section .unlock {
    cursor: pointer;
    display: block;
    height: 22px;
    width: 23px;
    background-image: url('../images/metro_icon_pack/plus.png');
    background-repeat: no-repeat;
    margin-left: -15px;
    margin-top: 5px;
}

#lock-screen #time-section .unlock:hover {
    animation: rotate 1s;
    -o-animation: rotate 1s;
    -ms-animation: rotate 1s;
    -moz-animation: rotate 1s;
    -webkit-animation: rotate 1s;
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        background-image: url('../images/metro_icon_pack/minus.png');
    }
}

Now, I realize I only am giving code for WebKit-based browsers (Chrome and Safari). That’s because I’m testing it in Chrome, and I will later add further support for other browsers once I get it.

Thanks for any help, guys!

Answer 1

I would place the minus background image under #lock-screen #time-section .unlock:hover and just add a single-second background-image transition.

Also, rather than using 0%, 100% you could just use from, to…

Like:

#lock-screen #time-section .unlock:hover {
background-image: url('../images/metro_icon_pack/minus.png');
-webkit-transition: background-image 1s;
/* Other -vendor-transitions go here */
}

Demo.

I would also go with the transform approach rather than animations and just use transitions (you’ll also be able to rotate the element back to the plus sign)…
Demo.

If you don’t want to rotate the element back to the plus sign, just add the -webkit-transition to the hover state.

Demo.