Motion path allows authors to position any graphical object and animate it along an author specified path.
This allows a number of powerful new transform possibilities, such as positioning using polar coordinates (with the ray() function) rather than the standard rectangular coordinates used by the translate() function, or animating an element along a defined path, making it easy to define complex and beautiful 2d spatial transitions.
Paths can be specified as circle(), ellipse(), rect(), inset(), xywh(), polygon(), ray() and url().
TAG review statusNot applicable
Interoperability and CompatibilityGecko
: In development WIP as part of Interop 2023WebKit
: In development WIP as part of Interop 2023Web developers
: No signalsOther signals
: It's part of the Interop 2023
WebView application risks
Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?
Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?YesYes
Flag nameCSSOffsetPathBasicShapesCircleAndEllipse, CSSOffsetPathBasicShapesRectanglesAndPolygon, CSSOffsetPathCoordBox, CSSOffsetPathRay, CSSOffsetPathRayContain, CSSOffsetPathUrl
Requires code in //chrome?False
|Shipping on desktop||115|
|DevTrial on desktop||115|
|Shipping on Android||115|
|DevTrial on Android||115|
Link to entry on the Chrome Platform Statushttps://chromestatus.com/feature/5124394449371136