Animations
Create and edit SMIL animations
This category contains 10 showcases
| Animations | Play all Animations showcases continuously |
| Animate attributes | Animate DOM attributes and style properties of elements |
| Animate transform | Animate an element with translate, rotate, scale, skew transformations |
| Animate using keySplines | Animate attribute values with spline interpolation |
| Animate using keyTimes | Animate using keyTimes with multiple values to control the transition speed of each value |
| Animations schedule | Describes the schedule of animations with their sequences. |
| 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). |
| 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. |
| Motion target group | When the motion target is transformed, the animation should be applied to an enclosing group of the target. |
| Motion using keyTimes | Animate motion using keyTimes/keySplines to set speed along the path with spline interpolation to accelerate and decelerate. A demonstration with ski jumping |
| Synchronization by events | Synchronize animations by events (begin, end, click, hyperlink, ..) |