Question 1 of 8
Which property defines the geometric path used by the offset transform?
It names the path itself.
offset-path specifies the geometric path used by the offset transform.
Quiz
Test your knowledge: CSS Motion Path
Assess your understanding of offset paths, path distance, anchors, rotation, shorthand, and specification status.
8 questions
~4 min
Intermediate
Knowledge check
Test your knowledge: CSS Motion Path
Assess your understanding of offset paths, path distance, anchors, rotation, shorthand, and specification status.
- Stuck? Each question has an optional hint.
- Skip a hard question and review it before your results.
- Questions and answer options can shuffle between attempts.
You can retake this quiz whenever you like.
0:00
Question 2 of 8
What does `offset-distance: 50%` use as its reference?
The percentage belongs to the path, not the box.
Percentages for offset-distance are relative to the total offset path length.
Question 3 of 8
Which value makes offset rotation follow the path direction?
It is the automatic path-following mode.
offset-rotate: auto adds rotation based on the direction of the offset path.
Question 4 of 8
Which property chooses the point on the element attached to the offset position?
It controls the element-side anchor point.
offset-anchor controls the point on the element attached to the offset position.
Question 5 of 8
What is the distinct responsibility of `offset-position`?
Do not confuse the path start with the distance along the path.
offset-position supplies the starting position used by relevant offset-path functions.
Question 6 of 8
Which CSS system supplies timing when `offset-distance` is animated?
Motion Path supplies geometry; another module supplies timing.
Animations and Transitions control timing; Motion Path supplies the path-based geometry.
Question 7 of 8
What does the `offset` property provide?
It combines the Motion Path longhands.
The current draft defines offset as the shorthand for the Motion Path offset properties.
Question 8 of 8
How should the current CSS Motion Path Module Level 1 document be described?
Read the status section of the current CSSWG document.
The current document is an Editor's Draft and says it is provided for discussion and may change.
Quiz results
0/0
Review
-
Which property defines the geometric path used by the offset transform?Hint used
-
What does `offset-distance: 50%` use as its reference?Hint used
-
Which value makes offset rotation follow the path direction?Hint used
-
Which property chooses the point on the element attached to the offset position?Hint used
-
What is the distinct responsibility of `offset-position`?Hint used
-
Which CSS system supplies timing when `offset-distance` is animated?Hint used
-
What does the `offset` property provide?Hint used
-
How should the current CSS Motion Path Module Level 1 document be described?Hint used