有没有办法让 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 {/*...*/}
中的那些部分,定义动画的名称 'pulse' from
(开始)、50% 标记和 to
(结束)(您会注意到与 完全相同from
声明,给人以无缝动画的印象。
转念一想,-webkit-animation-iteration-count: 10;
似乎在“无限”方面存在问题。省略此属性意味着动画只发生一次,将值设置为 0
(如预期的那样)将完全阻止动画发生。
所以,也许不是无限的,但它似乎对 3000
的值很满意,所以大概其他类似的大数字也是可行的。
修改后的演示 with super-large -webkit-animation-iteration-count
of over nine-thousaaaaaand...
编辑惊讶:
显然无限
是,实际上是一个valid argument对于 -webkit-animation-iteration-count
。在 jsbin (again) 查看最新的 演示.
关于css - webkit动画 Prop ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3843803/