Animations
Create and edit SMIL animations
This category contains 11 showcases
Play all Animations showcases continuously
Animate DOM attributes and style properties of elements
Animate an element with translate, rotate, scale, skew transformations
Animate attribute values with spline interpolation
Animate using keyTimes with multiple values to control the transition speed of each value
Describes the schedule of animations with their sequences.
Shows how to define the origin of a motion animation.
Define the motion origin point on the target.
Select the moving method (transform or animate).
Shows how to define the motion path of a target using the three methods (refers, copy, describe).
The motion path can be defined with a geometric element of any type (rectangle, circle, ellipse. path).
Animations are updated by constraints when motion path changes.
Animations properties can be edited.
When the motion target is transformed, the animation should be
applied to an enclosing group of the target.
Animate motion using keyTimes/keySplines to set speed along the path with spline interpolation to accelerate and decelerate.
A demonstration with ski jumping
Synchronize animations by events (begin, end, click, hyperlink, ..)
Using the set command to fix elements state during animations