176484 2017-09-06 17:00:40 -0700 Web Inspector: Styles Redesign: Show CSS animations (@keyframes) 2024-03-22 10:35:27 -0700 1 1 1 Unclassified WebKit Web Inspector WebKit Nightly Build All All REOPENED https://bugs.webkit.org/show_bug.cgi?id=176289 InRadar P2 Normal --- 1 nvasilyev nvasilyev hi inspector-bugzilla-changes rcaliman webkit-bug-importer oldest_to_newest 1346159 0 nvasilyev 2017-09-06 17:00:40 -0700 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. 1346160 1 webkit-bug-importer 2017-09-06 17:01:17 -0700 <rdar://problem/34295517> 1346564 2 hi 2017-09-07 14:51:14 -0700 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? 1346572 3 nvasilyev 2017-09-07 15:05:35 -0700 (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. 1558826 4 hi 2019-08-06 10:40:25 -0700 *** This bug has been marked as a duplicate of bug 31074 *** 2023162 5 rcaliman 2024-03-22 10:35:27 -0700 Reopening. It is still not possible to view styles for CSS @keyframes rules. <rdar://125244567>