The translate() method moves an element from its current position:
The rotate() method rotates an element clockwise or counter-clockwise.
The scale() method increases or decreases the size of an element.
The scaleX() method increases or decreases the width of an element.
The scaleY() method increases or decreases the height of an element.
The skew() method skews an element along the X-axis by the given angle.
The skewX() method skews an element along the X-axis by the given angle.
The skewY() method skews an element along the X-axis by the given angle.
The matrix() method combines all the 2D transform methods into one.
Another use of the matrix() method.
The rotateX() method rotates an element around its X-axis at a given degree.
The rotateY() method rotates an element around its Y-axis at a given degree.
The rotateZ() method rotates an element around its Z-axis at a given degree.
Hover over the div element below, to see the transition effect:
Note: When an animation is finished, it goes back to its original style.
Note: When an animation is finished, it goes back to its original style.
The animation-delay property specifies a delay for the start of an animation. The following example has a 2 seconds delay before starting the animation:
The animation-iteration-count property specifies the number of times an animation should run. The following example will run the animation 3 times before it stops:
The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example will run the animation in reverse direction (backwards):
The animation-timing-function property specifies the speed curve of the animation. The following example shows some of the different speed curves that can be used:
Let the div element get the style values set by the first keyframe before the animation starts (during the animation-delay period):
This example uses the shorthand animation property: