html - webkit-animatoin 悬在半空中

Question

我有一个 webkit 动画代码，可以使球在悬停时上下弹跳， 问题是当光标没有尾随它悬卡在半空中的球时，所以基本上你必须上下跟随球才能工作。 我需要的是当光标接触到球时，球会自行反弹。

代码如下:

    .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

你错过了一个真正的动画

看这里 -- https://jsfiddle.net/9tvwkvdc/2/

例如，我只是添加了脉冲并添加了(当然可以将其更改为您想要的任何内容)

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

此外 - 确保使用所有适当的供应商前缀。

你可以通过做这样的事情来浓缩你所拥有的一些东西 -

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