Animations

Create and edit SMIL animations
This category contains 10 showcases

AnimationsPlay all Animations showcases continuously 
Animate attributesAnimate DOM attributes and style properties of elements25 steps
Animate transformAnimate an element with translate, rotate, scale, skew transformations37 steps
Animate using keySplinesAnimate attribute values with spline interpolation 25 steps
Animate using keyTimesAnimate using keyTimes with multiple values to control the transition speed of each value21 steps
Animations scheduleDescribes the schedule of animations with their sequences.12 steps
Motion origin
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).
22 steps
Motion path
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.
32 steps
Motion target group
When the motion target is transformed, the animation should be
applied to an enclosing group of the target.
20 steps
Motion using keyTimesAnimate motion using keyTimes/keySplines to set speed along the path with spline interpolation to accelerate and decelerate.
A demonstration with ski jumping
47 steps
Synchronization by eventsSynchronize animations by events (begin, end, click, hyperlink, ..)30 steps