Webkit动画道具

当然有了 是 :

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale(1.0);
    opacity: 0.75;
  }
  50% {
    -webkit-transform: scale(1.2);
    opacity: 1.0;
  }
  to { 
    -webkit-transform: scale(1.0);
    opacity: 0.75;
  }
}

img.pulse { opacity: 0.75; }
img.pulse:hover { 
  -webkit-animation-name: pulse; 
  -webkit-animation-duration: 0.5s; 
  -webkit-animation-iteration-count: 10; 
}

这是从 source, here

要观察的重要部分(显然,我认为)是 keyframes @-webkit-keyframes pulse {/*...*/} ,定义动画的名称“脉冲” from (开始),50%标记,和 to (结束)(你会注意到这和 从 声明,给人以无缝动画的印象。

再想一想,似乎 -webkit-animation-iteration-count: 10; 可能会出现一个关于“无限”的问题。省略此属性表示动画发生一次,将值设置为 0 (如预期)完全阻止动画发生。

所以,也许不是无限的,但它似乎很满意 3000 所以,假设其他类似的大数字也能做到。

修订的演示 with super-large -webkit-animation-iteration-count of over nine-thousaaaaaand...

显然 infinite 是 实际上,一个 valid argument 对于 -WebKit动画迭代计数 . 查看 最新 演示,在 jsbin (again) .