webkit动画道具

有没有办法让webkit动画无限期运行?

已邀请:

aet

赞同来自:

当然有:

@-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(结束)(您会注意到它们完全相同)作为from声明,给人无缝动画的印象。 再想一想,似乎-webkit-animation-iteration-count: 10;可能会出现“无限”问题。省略此属性意味着动画发生一次,将值设置为0(如预期的那样)会阻止动画发生。 所以,也许不是无限的,但似乎对3000的值感到满意,所以可能其他类似的大数字也是可行的。 修订演示with super-large -webkit-animation-iteration-count of over nine-thousaaaaaand...
编辑惊喜: 事实上,infinite实际上是-webkit-animation-iteration-countvalid argument。请参阅jsbin (again)上的最新演示。

要回复问题请先登录注册