CSS animation and SVG animation don't completely synchronize

[miyanokomiya]

refs #339

sample SVG and project

{"armatures":[{"name":"armature","transform":{"translate":{"x":0,"y":0},"origin":{"x":0,"y":0},"rotate":0,"scale":{"x":1,"y":1}},"bones":["525293e0-3f6d-49b0-a0ea-08a89b03ec66"],"id":"initial-armature"}],"bones":[{"name":"bone","transform":{"translate":{"x":0,"y":0},"origin":{"x":0,"y":0},"rotate":0,"scale":{"x":1,"y":1}},"parentId":"","connected":false,"head":{"x":0,"y":0},"tail":{"x":0,"y":100},"inheritRotation":true,"inheritScale":true,"constraints":[],"id":"525293e0-3f6d-49b0-a0ea-08a89b03ec66"}],"constraints":[],"armatureSelected":[["initial-armature",true]],"boneSelected":[],"canvasMode":"object","actions":[],"keyframes":[],"actionSelected":[],"keyframeState":[],"targetPropsState":[],"actors":[{"armatureId":"initial-armature","svgTree":{"tag":"svg","attributes":{"xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 400 400","font-family":"sans-serif"},"children":[],"id":"svg"},"elements":["svg"],"viewBox":{"x":0,"y":0,"width":400,"height":400},"id":"initial-actor"}],"elements":[{"index":0,"tag":"svg","id":"svg"}],"actorSelected":[["initial-actor",true]],"elementSelected":[],"graphs":[{"name":"Graph","armatureId":"initial-armature","nodes":["a142cd09-20d3-4f6a-992a-67649a9dc999","dea8dbd4-70d7-4eb8-b85e-248167b2b49d","ea8f9ea3-8995-4967-b4ff-e5735d6b5395","gn_54fdfeae-d284-4612-ad1c-ed93ae42ae28","gn_72829b0f-71f9-4e01-bbb6-1a0a58caf8da","gn_c195a3b1-bda1-4c73-934f-524b66064701","gn_f61b0078-63f5-408d-ac32-a55f978863eb","gn_b3cd2dd4-b7f0-43c3-8379-f5ef5963d1ba","gn_17a093e1-acf6-4c12-bde5-128ec68e4306","gn_bf0d5b4a-9db7-417d-b04f-e71e1467fc70","gn_365de0ef-905f-41e4-a081-b322f7d8f2fb","gn_2f6b4255-88d7-406d-8bc0-fb99e1800a3d","gn_6918000b-b282-4ba1-8617-9a28c16ac8f3","gn_945bdeef-e8a4-4435-a17c-2c39d643428e","gn_92e6d901-0d63-437c-9d35-939fa3a93c53"],"id":"269500b3-a43d-4391-9063-65d86dd0ddfe"},{"name":"Graph.001","armatureId":"initial-armature","nodes":["gn_2c4828ee-d9bb-4d9a-a920-192dd19c10d0","gn_ccca9138-f3c2-48fc-9992-5eadcb44bed4","gn_ac9a03fe-813f-4c4e-84b1-fdb5831f3a7a","gn_32b324a1-012c-4770-b11e-0c9ea9ae83b9","gn_09c9a4e2-9063-404d-addd-2463d35723ba","gn_5b779ae2-f3a3-4544-afa9-28e8076bd636","gn_c134a9db-8a46-47e4-a63c-b8e151193224","gn_014a9756-53f6-4587-8408-7508a89945c9","gn_9093f10a-a39f-416e-88dc-8c5c80d2b102"],"id":"73a4a612-529f-4a22-8d39-09e7eb3606ec"}],"nodes":[{"id":"a142cd09-20d3-4f6a-992a-67649a9dc999","type":"get_frame","data":{},"inputs":{},"position":{"x":-677.0667575000002,"y":321.8442875}},{"id":"dea8dbd4-70d7-4eb8-b85e-248167b2b49d","type":"multi_scaler","data":{},"inputs":{"a":{"from":{"id":"gn_17a093e1-acf6-4c12-bde5-128ec68e4306","key":"value"}},"b":{"value":1897}},"position":{"x":-351.33775750000007,"y":223.93528750000002}},{"id":"ea8f9ea3-8995-4967-b4ff-e5735d6b5395","type":"create_object_rect","data":{},"inputs":{"disabled":{"value":false},"parent":{"value":""},"transform":{"value":{"translate":{"x":0,"y":0},"origin":{"x":0,"y":0},"rotate":0,"scale":{"x":1,"y":1}}},"fill":{"from":{"id":"gn_365de0ef-905f-41e4-a081-b322f7d8f2fb","key":"color"}},"stroke":{"value":{"translate":{"x":0,"y":0},"origin":{"x":0,"y":0},"rotate":0,"scale":{"x":1,"y":1}}},"stroke-width":{"value":1},"centered":{"value":false},"x":{"value":0},"y":{"value":0},"width":{"value":20},"height":{"value":20}},"position":{"x":-404.0323675000001,"y":-232.1860825000001}},{"id":"gn_54fdfeae-d284-4612-ad1c-ed93ae42ae28","type":"tornado_clone_object","data":{},"inputs":{"object":{"from":{"id":"ea8f9ea3-8995-4967-b4ff-e5735d6b5395","key":"object"}},"rotate":{"from":{"id":"gn_bf0d5b4a-9db7-417d-b04f-e71e1467fc70","key":"value"}},"max_rotate":{"from":{"id":"dea8dbd4-70d7-4eb8-b85e-248167b2b49d","key":"value"}},"interval":{"value":30},"offset":{"value":0},"radius":{"value":19},"radius_grow":{"value":1.1},"scale_grow":{"value":1.1},"fix_rotate":{"value":false}},"position":{"x":7.471209999999928,"y":4.028524999999888}},{"id":"gn_72829b0f-71f9-4e01-bbb6-1a0a58caf8da","type":"get_object","data":{"object":"svg"},"inputs":{},"position":{"x":-65.00174000000004,"y":-289.0842950000003}},{"id":"gn_c195a3b1-bda1-4c73-934f-524b66064701","type":"set_viewbox","data":{},"inputs":{"object":{"from":{"id":"gn_72829b0f-71f9-4e01-bbb6-1a0a58caf8da","key":"object"}},"centered":{"value":true},"x":{"value":0},"y":{"value":0},"width":{"from":{"id":"gn_945bdeef-e8a4-4435-a17c-2c39d643428e","key":"value"}},"height":{"from":{"id":"gn_945bdeef-e8a4-4435-a17c-2c39d643428e","key":"value"}}},"position":{"x":147.31938000000014,"y":-334.6044950000003}},{"id":"gn_f61b0078-63f5-408d-ac32-a55f978863eb","type":"make_transform","data":{},"inputs":{"translate":{"value":{"x":0,"y":0}},"rotate":{"from":{"id":"dea8dbd4-70d7-4eb8-b85e-248167b2b49d","key":"value"}},"scale":{"value":{"x":1,"y":1}},"origin":{"value":{"x":0,"y":0}}},"position":{"x":-204.9297700000002,"y":270.89402499999994}},{"id":"gn_b3cd2dd4-b7f0-43c3-8379-f5ef5963d1ba","type":"hide_object","data":{},"inputs":{"disabled":{"value":false},"object":{"from":{"id":"gn_54fdfeae-d284-4612-ad1c-ed93ae42ae28","key":"origin"}}},"position":{"x":278.22323000000006,"y":91.20902499999991}},{"id":"gn_17a093e1-acf6-4c12-bde5-128ec68e4306","type":"divide_scaler","data":{},"inputs":{"a":{"from":{"id":"a142cd09-20d3-4f6a-992a-67649a9dc999","key":"frame"}},"b":{"from":{"id":"a142cd09-20d3-4f6a-992a-67649a9dc999","key":"end_frame"}}},"position":{"x":-488.43277000000035,"y":320.141025}},{"id":"gn_bf0d5b4a-9db7-417d-b04f-e71e1467fc70","type":"multi_scaler","data":{},"inputs":{"a":{"from":{"id":"a142cd09-20d3-4f6a-992a-67649a9dc999","key":"frame"}},"b":{"value":-3}},"position":{"x":-420.13714560700043,"y":95.23530369300005}},{"id":"gn_365de0ef-905f-41e4-a081-b322f7d8f2fb","type":"make_color","data":{},"inputs":{"h":{"from":{"id":"gn_2f6b4255-88d7-406d-8bc0-fb99e1800a3d","key":"value"}},"s":{"value":1},"v":{"value":1},"a":{"value":1}},"position":{"x":-584.4725284100002,"y":-154.77626745000023}},{"id":"gn_2f6b4255-88d7-406d-8bc0-fb99e1800a3d","type":"multi_scaler","data":{},"inputs":{"a":{"from":{"id":"gn_17a093e1-acf6-4c12-bde5-128ec68e4306","key":"value"}},"b":{"value":360}},"position":{"x":-660.3395284100002,"y":108.76173254999992}},{"id":"gn_6918000b-b282-4ba1-8617-9a28c16ac8f3","type":"multi_scaler","data":{},"inputs":{"a":{"from":{"id":"gn_17a093e1-acf6-4c12-bde5-128ec68e4306","key":"value"}},"b":{"value":300}},"position":{"x":-189.16552840999992,"y":-150.78326745000032}},{"id":"gn_945bdeef-e8a4-4435-a17c-2c39d643428e","type":"add_generics","data":{},"inputs":{"a":{"from":{"id":"gn_6918000b-b282-4ba1-8617-9a28c16ac8f3","key":"value"},"genericsType":{"type":"SCALER","struct":"UNIT"}},"b":{"from":{"id":"gn_92e6d901-0d63-437c-9d35-939fa3a93c53","key":"value"},"genericsType":{"type":"SCALER","struct":"UNIT"}}},"position":{"x":-24.121528409999826,"y":-146.79026745000027}},{"id":"gn_92e6d901-0d63-437c-9d35-939fa3a93c53","type":"scaler","data":{"value":100},"inputs":{},"position":{"x":-199.81352840999995,"y":-17.683267450000244}},{"id":"gn_2c4828ee-d9bb-4d9a-a920-192dd19c10d0","type":"create_object_path","data":{},"inputs":{"disabled":{"value":false},"parent":{"value":""},"transform":{"value":{"translate":{"x":0,"y":0},"origin":{"x":0,"y":0},"rotate":0,"scale":{"x":1,"y":1}}},"fill":{"value":{"translate":{"x":0,"y":0},"origin":{"x":0,"y":0},"rotate":0,"scale":{"x":1,"y":1}}},"stroke":{"value":{"translate":{"x":0,"y":0},"origin":{"x":0,"y":0},"rotate":0,"scale":{"x":1,"y":1}}},"stroke-width":{"value":1},"d":{"from":{"id":"gn_ac9a03fe-813f-4c4e-84b1-fdb5831f3a7a","key":"d"}}},"position":{"x":-327.64276841000014,"y":48.081442549999906}},{"id":"gn_ccca9138-f3c2-48fc-9992-5eadcb44bed4","type":"make_path_m","data":{},"inputs":{"d":{"value":[]},"relative":{"value":false},"p":{"value":{"x":0,"y":0}}},"position":{"x":-705.8197984100004,"y":89.96801254999986}},{"id":"gn_ac9a03fe-813f-4c4e-84b1-fdb5831f3a7a","type":"make_path_l","data":{},"inputs":{"d":{"from":{"id":"gn_ccca9138-f3c2-48fc-9992-5eadcb44bed4","key":"d"}},"relative":{"value":false},"p":{"from":{"id":"gn_c134a9db-8a46-47e4-a63c-b8e151193224","key":"vector2"}}},"position":{"x":-499.5147984100002,"y":187.13101254999987}},{"id":"gn_32b324a1-012c-4770-b11e-0c9ea9ae83b9","type":"get_frame","data":{},"inputs":{},"position":{"x":-995.9777984100004,"y":305.5900125499999}},{"id":"gn_09c9a4e2-9063-404d-addd-2463d35723ba","type":"divide_scaler","data":{},"inputs":{"a":{"from":{"id":"gn_32b324a1-012c-4770-b11e-0c9ea9ae83b9","key":"frame"}},"b":{"from":{"id":"gn_32b324a1-012c-4770-b11e-0c9ea9ae83b9","key":"end_frame"}}},"position":{"x":-833.5957984100005,"y":305.59001255}},{"id":"gn_5b779ae2-f3a3-4544-afa9-28e8076bd636","type":"multi_scaler","data":{},"inputs":{"a":{"from":{"id":"gn_09c9a4e2-9063-404d-addd-2463d35723ba","key":"value"}},"b":{"value":101}},"position":{"x":-695.1717984100004,"y":356.16801254999996}},{"id":"gn_c134a9db-8a46-47e4-a63c-b8e151193224","type":"make_vector2","data":{},"inputs":{"x":{"from":{"id":"gn_5b779ae2-f3a3-4544-afa9-28e8076bd636","key":"value"}},"y":{"value":0}},"position":{"x":-550.0927984100003,"y":374.80201255}},{"id":"gn_014a9756-53f6-4587-8408-7508a89945c9","type":"create_object_rect","data":{},"inputs":{"disabled":{"value":false},"parent":{"value":""},"transform":{"from":{"id":"gn_9093f10a-a39f-416e-88dc-8c5c80d2b102","key":"transform"}},"fill":{"value":{"translate":{"x":0,"y":0},"origin":{"x":0,"y":0},"rotate":0,"scale":{"x":1,"y":1}}},"stroke":{"value":{"translate":{"x":0,"y":0},"origin":{"x":0,"y":0},"rotate":0,"scale":{"x":1,"y":1}}},"stroke-width":{"value":1},"centered":{"value":false},"x":{"from":{"id":"gn_5b779ae2-f3a3-4544-afa9-28e8076bd636","key":"value"}},"y":{"value":41},"width":{"value":100},"height":{"value":100}},"position":{"x":-322.411,"y":332.987125}},{"id":"gn_9093f10a-a39f-416e-88dc-8c5c80d2b102","type":"make_transform","data":{},"inputs":{"translate":{"value":{"x":0,"y":0}},"rotate":{"from":{"id":"gn_5b779ae2-f3a3-4544-afa9-28e8076bd636","key":"value"}},"scale":{"value":{"x":1,"y":1}},"origin":{"value":{"x":0,"y":0}}},"position":{"x":-542.06,"y":546.6831250000001}}],"graphSelected":[["269500b3-a43d-4391-9063-65d86dd0ddfe",true]],"nodeSelected":[]}

[miyanokomiya]

CSS supporting attributes list is here https://dev.w3.org/SVG/proposals/css-animation/animation-proposal.html

[miyanokomiya]

offset is really supported by CSS animation? It didn't work when I tried. => The doc is just a proposal

[miyanokomiya]

SMIL for d morphing has a limitation that all d values should have the same topology (commands and count of control points).

[miyanokomiya]

These ways didn't solve this issue

• Using only CSS
• Add animation-fill-mode: both;
• Add animation-timing-function: steps(...);

[miyanokomiya]

Other example https://github.com/miyanokomiya/blendic-svg/pull/657#issuecomment-1272232271