is there a way to get a webkit animation to开发者_StackOverflow中文版 run indefinitely?
There certainly is:
@-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;
}
This was taken from the source, here
The important parts to observe (obviously, I suppose) are those within the keyframes
@-webkit-keyframes pulse {/*...*/}
, defining the animation's name 'pulse' the from
(start), 50% mark, and to
(end) (which you'll notice is exactly the same as the from
declaration, to give the impression of seamless animation.
On second thoughts, it seems that -webkit-animation-iteration-count: 10;
might present a problem, as regards 'infinite.' Omitting this property means the animation occurs once, setting the value to 0
(as expected) prevents the animation occurring at all.
So, perhaps not infinite, but it seems happy with a value of 3000
, so presumably other similarly-large numbers would be do-able.
Revised demo with super-large -webkit-animation-iteration-count
of over nine-thousaaaaaand...
Edited in surprise:
Apparently infinite
is, in fact, a valid argument for the -webkit-animation-iteration-count
. See the newest demo, at jsbin (again).
精彩评论