RESOLVED WORKSFORME253032
animation-name or @keyframe identifiers with quotes are recognized 
https://bugs.webkit.org/show_bug.cgi?id=253032
Summary animation-name or @keyframe identifiers with quotes are recognized
Ahmad Saleem
Reported 2023-02-27 14:45:39 PST
Hi Team, I came cross following codepen from Chrome's Monorail and Safari Technology Preview 164 is matching Firefox Nightly 112 as of right now but Chrome Canary 113 is totally different: CodePen Link - https://codepen.io/rupl/pen/BaEjPq?editors=110 *** Safari 16.3 *** Only last two are pulsating. *** Safari Technology Preview 164 *** All are pulsating *** Chrome Canary 113 *** Only Green one is pulsating *** Firefox Nightly 112 *** All are pulsating ____ Chrome Bug - https://bugs.chromium.org/p/chromium/issues/detail?id=423424 Just wanted to raise to see if we have interop behavior or we are wrong, if latter, so we can track this and fix. Thanks!
Attachments
Add attachment proposed patch, testcase, etc.
Antoine Quint
Comment 1 2023-02-28 01:48:20 PST
I think the CodePen is wrong and all the referenced material from it outdated. The current spec for CSS Animations specifies <string> as valid values at https://w3c.github.io/csswg-drafts/css-animations/#typedef-keyframes-name: <keyframes-name> = <custom-ident> | <string> There is also this note specifically showing using strings as valid: For example, the following two @keyframes rules have the same name, so the first will be ignored: @keyframes foo { /* ... */ } @keyframes "foo" { /* ... */ } I believe Chrome is incorrect while Firefox and Safari are correct.
Note You need to log in before you can comment on or make changes to this bug.