| Summary: | iterationCount in Web Animations JavaScript API doesn't do anything | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Jack Wellborn <w0nka> |
| Component: | Animations | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED INVALID | ||
| Severity: | Normal | CC: | dino, graouts, graouts, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari Technology Preview | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
|
Description
Jack Wellborn
2020-05-20 12:51:53 PDT
Reading this article https://webkit.org/blog/10266/web-animations-in-safari-13-1/, I tried the last sample under "Part I – Animation Creation" in the console by selecting an element and using $0.animate.... Everything in the example worked as expected except iterationCount. The animation plays once regardless of the value. Expected Behavior: Animation repeats to the value provided in iterationCount. Actual Behavior: Animation only plays once regardless of the value provided in iterationCount. Let me know if a test page would help. Here's a test page. http://jackwellborn.com/playground/iterationCountTest/index.html Thanks for filing this Jack. This was a mistake in the blog post! The property is "iterations", not "iterationCount". Here's the relevant IDL in the Web Animations spec: https://drafts.csswg.org/web-animations-1/#dictdef-effecttiming. We'll fix the blog post. I also noticed the spec has a non-normative mention of "iterationCount" that I'll fix in https://github.com/w3c/csswg-drafts/issues/5096. Thanks. I see it working with 'iterations'. I think the confusion is that the css property is 'animation-iteration-count' (https://www.w3.org/TR/css-animations-1/#animation-iteration-count) and that JavaScript property names typically reflect css property names. In that sense, I kind of feel like the JavaScript name is non-normative. Just out of my own curiosity, in what sense is 'iterationCount' non-normative? (In reply to Jack Wellborn from comment #5) > Thanks. > > I see it working with 'iterations'. I think the confusion is that the css > property is 'animation-iteration-count' > (https://www.w3.org/TR/css-animations-1/#animation-iteration-count) and that > JavaScript property names typically reflect css property names. In that > sense, I kind of feel like the JavaScript name is non-normative. Just out of > my own curiosity, in what sense is 'iterationCount' non-normative? It was used in some example text in the spec, and it's now gone completely in the spec's Git repository. It was just a mistake, the `iterationCount` property does not exist :) |