Reputation: 8284
Is it possible (even with the assistance of jQuery, if necessary -- to loop a CSS3 keyframe animation 8 times)
.coin{
animation: animationFrames ease 1.5s;
-webkit-animation: animationFrames ease 1.5s; /* Safari 4+ */
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
animation-fill-mode:forwards;
-webkit-animation-fill-mode: forwards;
max-width: 55px;
position:relative;
top: 63px;
left: 195px;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes animationFrames {
0% {
-webkit-transform: translate(-402px,55px) ;
}
4% {
-webkit-transform: translate(-333px,26px) ;
}
9% {
-webkit-transform: translate(-257px,-13px) ;
}
14% {
-webkit-transform: translate(-183px,-18px) ;
}
19% {
-webkit-transform: translate(-122px,0px) ;
}
19% {
-webkit-transform: translate(-122px,44px) ;
}
19% {
-webkit-transform: translate(-122px,44px) ;
}
24% {
-webkit-transform: translate(-98px,59px) ;
}
29% {
-webkit-transform: translate(-91px,128px) ;
}
29% {
-webkit-transform: translate(-91px,128px) ;
}
34% {
-webkit-transform: translate(-59px,77px) ;
}
38% {
-webkit-transform: translate(-13px,34px) ;
}
42% {
-webkit-transform: translate(51px,13px) ;
}
46% {
-webkit-transform: translate(101px,39px) ;
}
51% {
-webkit-transform: translate(141px,72px) ;
}
56% {
-webkit-transform: translate(163px,105px) ;
}
62% {
-webkit-transform: translate(177px,155px) ;
}
68% {
-webkit-transform: translate(177px,155px) ;
}
100% {
-webkit-transform: translate(177px,155px) ;
}
}
Upvotes: 0
Views: 154