REOPENED 176484
Web Inspector: Styles Redesign: Show CSS animations (@keyframes) 
https://bugs.webkit.org/show_bug.cgi?id=176484
Summary Web Inspector: Styles Redesign: Show CSS animations (@keyframes)
Nikita Vasilyev
Reported 2017-09-06 17:00:40 PDT
Currently, we don't show @keyframes rules in the styles sidebar at all. Steps: 1. Open http://nv.github.io/webkit-inspector-bugs/styles-redesign/tests/css-animations.html 2. Inspect <p>foo</p> Expected: At the bottom of the Styles panel, we should see: @keyframes slidein { from { transform: translateX(-20px); } to { transform: translateX(20px); } } Actual: @keyframes aren't shown.
Attachments
Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2017-09-06 17:01:17 PDT
<rdar://problem/34295517>
Devin Rousso
Comment 2 2017-09-07 14:51:14 PDT
Would all @keyframes be visible for all nodes, or are you going to try to only show @keyframes that are actively used by some rule for the selected node? Would it be worth creating a separate panel just for editing animations?
Nikita Vasilyev
Comment 3 2017-09-07 15:05:35 PDT
(In reply to Devin Rousso from comment #2) > Would all @keyframes be visible for all nodes, or are you going to try to > only show @keyframes that are actively used by some rule for the selected > node? The latter. > Would it be worth creating a separate panel just for editing > animations? Something like Chrome and Firefox have? https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations It would be nice to have, but I'm not planning on working on it any time soon.
Devin Rousso
Comment 4 2019-08-06 10:40:25 PDT
*** This bug has been marked as a duplicate of bug 31074 ***
Razvan Caliman
Comment 5 2024-03-22 10:35:27 PDT
Reopening. It is still not possible to view styles for CSS @keyframes rules. <rdar://125244567>
Note You need to log in before you can comment on or make changes to this bug.