232280 2021-10-25 15:40:44 -0700 Missing 'from' selector on @keyframes works erratically 2022-02-01 07:01:07 -0800 1 1 1 Unclassified WebKit Animations Safari Technology Preview Mac (Intel) macOS 11 RESOLVED WORKSFORME InRadar P2 Normal --- 1 jzabinski webkit-unassigned dino graouts graouts webkit-bug-importer oldest_to_newest 1808634 0 jzabinski 2021-10-25 15:40:44 -0700 When @keyframes rules are used to animate elements and the 'from' selector is missing, the animation behaves erratically. See this example: https://stackblitz.com/edit/web-platform-vmalvc?file=styles.css styles.css contains this @keyframes rule: @keyframes dash { to { stroke-dashoffset: 0; } } Running the project in Safari Technology Preview, I find that the line is animated erratically: anywhere from 20-60% of the time. If I add the 'from' keyword: @keyframes dash { from { stroke-dashoffset: 14.7; } to { stroke-dashoffset: 0; } } The animation seems to happen consistently. W3C says that 'If a 0% or from keyframe is not specified, then the user agent constructs a 0% keyframe using the computed values of the properties being animated.' That computation does not seem to be happening consistently. (Other browsers like Chrome work fine.) (Reference: https://www.w3.org/TR/css-animations-1/) 1810931 1 webkit-bug-importer 2021-11-01 15:41:18 -0700 <rdar://problem/84903751> 1835876 2 graouts 2022-02-01 02:41:36 -0800 Can you still reproduce the issue with Safari Technology Preview 139? I'm not able to reproduce it myself. 1835906 3 jzabinski 2022-02-01 04:18:03 -0800 Verified: no longer reproduces. 1835946 4 graouts 2022-02-01 07:01:07 -0800 Great! Thanks for checking.