CSS3: animated sprite + on hover

Question

I enter the world of CSS3 animations and transitions, so please forgive my ignorance. Here is a simplified version of what I'm trying to do:

• I have a ball that pulses endlessly with CSS3 keyframes.
• I want the ball to get bigger and stay that way when I hang over it.
• I want the ball to become small again when I turn my mouse away from it and continue to pulsate (all transitions should be smooth, of course).

Here's my hit on it using a combination of CSS3 animations and transitions (testing this on Chrome so far, hence the webkit prefixes):

@-webkit-keyframes pulsate { from { -webkit-transform: scale(0.7); } to { -webkit-transform: scale(0.8); } } .ball { background: blue; width: 100px; height: 100px; border-radius: 50%; transition: all 1s; -webkit-transform: scale(0.7); -webkit-transform-origin: center center; -webkit-animation-duration: 800ms; -webkit-animation-name: pulsate; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; } .ball:hover { -webkit-transform: scale(2); -webkit-animation-play-state: paused; /* transition works but gets reset at the end*/ /*-webkit-animation: 0;*/ /* transition works only one time, and no smooth transition on mouse out */ } 

jsFiddle Demo

The result is pretty close, but as soon as the ball ends when you hover over it, it becomes small again (I don’t understand why). I also tried disabling animation with -webkit-animation: 0; instead of pausing it, but it doesn’t work either.

I tried a different approach that uses only keyframes (no transitions), trying to call another keyframe set on hover:

 @-webkit-keyframes pulsate { from { -webkit-transform: scale(0.7); } to { -webkit-transform: scale(0.8); } } @-webkit-keyframes expand { to { -webkit-transform: scale(2); } } @-webkit-keyframes shrink { to { -webkit-transform: scale(0.7); } } .ball { background: blue; width: 100px; height: 100px; border-radius: 50%; transition: all 2s; -webkit-transform: scale(0.7); -webkit-transform-origin: center center; -webkit-animation-duration: 800ms, 800ms; -webkit-animation-name: shrink, pulsate; -webkit-animation-iteration-count: 1, infinite; -webkit-animation-direction: normal, alternate; -webkit-animation-timing-function: ease-in-out, ease-in-out; } .ball:hover { -webkit-animation-name: expand; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-fill-mode: forwards; } 

jsFiddle Demo

The ball remains large until the mouse is above it, but there is still no smooth transition when the mouse moves away from the ball. I expect it to use cut animation, but it is not.

Am I missing something or is it impossible to implement using only pure CSS at the moment?

// Bound thread, but did not work for me: Stop the animation and start the transition when you hover

Answer 1

You need to add an animation delay to complete the transition as it returns to scale(.7) at the beginning of the animation. Updated jsFiddle

 -webkit-animation-delay:1s; 

EDIT

I realized that the answer I wrote here is not entirely correct. True, the delay animated the transition from the big back to the small one, but if you point at the pulsating ball when you expand it, it will return to it a value of .7 before the animation to a large scale.

Updated demo

I came up with a fix that just uses some javascript to fix it based on this article . You need to change the CSS a bit, but this is not very noticeable as a result. Here is the updated code

 /* CSS */ body {margin: 100px;} @-webkit-keyframes pulsate { 0% { -webkit-transform: scale(0.7); } 50% { -webkit-transform: scale(0.8); } 100% { -webkit-transform: scale(0.7); } } .ball { background: blue; width: 100px; height: 100px; border-radius: 50%; -webkit-transform: scale(0.7); -webkit-transform-origin: center center; transition: all 1s; } .ball.animated { -webkit-animation-duration: 1600ms; -webkit-animation-name: pulsate; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; } /* Javascript */ var ball = document.getElementsByClassName('ball')[0], pfx = ["webkit", "moz", "MS", "o", ""], hovered = false; function AnimationListener() { if(hovered) { ball.classList.remove('animated'); ball.style.webkitTransform = 'scale(2)'; ball.style.transform = 'scale(2)'; } } function TransitionListener() { if(!hovered) { ball.classList.add('animated'); } } function PrefixedEvent(element, type, callback) { for (var p = 0; p < pfx.length; p++) { if (!pfx[p]) type = type.toLowerCase(); element.addEventListener(pfx[p]+type, callback, false); } } PrefixedEvent(ball, "AnimationIteration", AnimationListener); ball.onmouseover = function() { hovered = true; } ball.onmouseout = function() { hovered = false; PrefixedEvent(ball, "TransitionEnd", TransitionListener); ball.style.webkitTransform = 'scale(.7)'; ball.style.transform = 'scale(.7)'; } 

Answer 2

Just update this CSS rule, I added From and To - in Expand and Shrink:

 @-webkit-keyframes expand { from { -webkit-transform: scale(1); } to { -webkit-transform: scale(2); } } @-webkit-keyframes shrink { from { -webkit-transform: scale(2); } to { -webkit-transform: scale(1); } }