webkit-animatoin hanging in mid-air

Question

I've a a webkit-animation code that makes a ball bounces up and down on hover, problem is when cursor is not tailing the ball it hangs in mid-air, so basically you have to follow the ball up and down for it to work. What I need is for the ball to bounce by itself as soon as the cursor touches it.

here's the code:

    .animated { 
        -webkit-animation-duration: 1s; 
        animation-duration: 1s; 
        -webkit-animation-fill-mode: both; 
        animation-fill-mode: both; 
        animation-play-state: paused; 
        -webkit-animation-iteration-count:infinite; 

    } 



    .animated:hover{
       animation-play-state: running; 
    }

@-webkit-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-30px);} 
    60% {-webkit-transform: translateY(-15px);} 
} 

@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    40% {transform: translateY(-30px);} 
    60% {transform: translateY(-15px);} 
} 

.bounce { 
    -webkit-animation-name: bounce; 
    animation-name: bounce; 
}

Answer 1

You are missing an actual animation on this

see here -- https://jsfiddle.net/9tvwkvdc/2/

I just added the pulse for example and added (Change it to whatever you want of course)

  animation-name: pulse;
  -webkit-animation-name: pulse;

Also - make sure you use all the appropriate vendor prefixes.

You can condense some of what you have by doing stuff like this -

    -webkit-animation: pulse 1s infinite both paused; /* Safari 4+ */
    -moz-animation:    pulse 1s infinite both paused; /* Fx 5+ */
    -o-animation:      pulse 1s infinite both paused; /* Opera 12+ */
    animation:  pulse 5s infinite both paused;