CODEWITHSUNDEEP
javascriptcssanimation
Leb_Broth
Leb_Broth

Reputation: 1111

Webkit animation-iteration-count bug in Chrome

I have been struggling how to make my slideshow working again in Chrome after i adjusted my CSS3 animation properties heavily for some design flexibility reasons. After a long trial and error process, i found out that the CSS3 animation-iteration-count in Webkit is stopping my whole animation when it is assigned an integer value. (The value 10 in the example below is the iteration-count)

-webkit-animation: imageAnimation 48s linear 10 0s;
    -moz-animation: imageAnimation 48s linear 10 0s;
    -o-animation: imageAnimation 48s linear 10 0s;
    -ms-animation: imageAnimation 48s linear 10 0s;
    animation: imageAnimation 48s linear 10 0s;

Upvotes: 2

Views: 460

Answers (1)

Leb_Broth
Leb_Broth

Reputation: 1111

To solve that problem, i adjusted the Webkit line by assigning the infinite property for the animation-iteration-count 

-webkit-animation: imageAnimation 48s linear infinite 0s;
    -moz-animation: imageAnimation 48s linear 10 0s;
    -o-animation: imageAnimation 48s linear 10 0s;
    -ms-animation: imageAnimation 48s linear 10 0s;
    animation: imageAnimation 48s linear 10 0s;

and that's it, my slideshow is showing again in Chrome. But couldn't find any bug report online that links to that weird matter. I appreciate if some of you has some info links on that Webkit issue as it's important for me not to loop my slideshow forever in Chrome.

Upvotes: 3

Related Questions