CSS animation property provides an ease to animate other CSS properties, such as opacity, color, height, background color, and many more. CSS animation properties animate the transition from one style configuration to another. Earlier animation was implemented with the help of JavaScript and libraries, which made things unnecessarily complicated. In comparison, CSS animations have predefined properties that are much easier to implement.
CSS animations are divided into three major categories:
1. Transform: Transforming an element to 2D or 3D. So by using this property, you can rotate, scale, skew, or translate.
2. Transition: Using this property, you can change the property value smoothly by specifying the name of the CSS property you want to add and its duration.
3. Keyframes: Using this property, you can gradually change one style configuration to another.
CSS Animation comprises these three properties. So in this section of the “CSS Animations Complete Tutorial, “we will look at the first animation category, i.e., Transform, with relevant examples.
CSS Animation – Transform
CSS Transform means transforming an element to 2D or 3D. So by using this property, you can rotate, scale, skew, or translate and shape an element in the desired way.
1. Transform Properties
There are three transform properties:
1. Transform: This property specifies which transform function (translate, rotate, scale, skew) to use.
2. Transform-origin: This property changes the position of the transformed element. 2D transformation can change the x-axis, and y-axis and 3D transformation can change the x-axis, y-axis, and z-axis.
Transform-origin has five values:
- X-axis: Defines where the element is to be placed on the x-axis.
- Y-axis: Defines where the element is to be placed on the y-axis.
- Z-axis: Defines where the element is to be placed on the z-axis.
- Initial: This value sets the property to its default value.
- Inherit: This value inherits the property from its parent element.
3. Transform-style: This property is to specify the rendering of nested elements in 3D space.
Transform-style has four values:
- Flat(Default): This value specifies that child elements will not preserve their 3D positions.
- Preserve-3d: This property value specifies that the child’s element will preserve their 3D positions.
- Initial: This value sets the property to its default value.
- Inherit: This value inherits the property from its parent element.
Note: Transform-origin and Transform-style property must be used together with transform-property.
2. Transform Functions
There are four transform functions:
1. Translate: Moves an element along up to x-axis, y-axis, and z-axis.
2. Rotate: Rotate an element around the center.
3. Scale: Resize an element.
4. Skew: Distorting an element. It only accepts angle.
I. Translate
The translate() function moves the element from one point to another across a plane, i.e., x-axis and y-axis. It accepts two parameters in which the first value is for the x-axis, and the second value is for the y-axis.
Syntax: transform: translate_function(values);
The translate has the following functions:
- translate(value): Moves an element along the x-axis only.
- translate(value, value): Moves an element along the x-axis and the y-axis.
- translateX(value): Moves an element along the x-axis.
- translateY(value): Moves an element along the y-axis.
- translate3d(value): Moves an element along the 3 dimensions i.e. x-axis, y-axis and z-axis.
- translateZ(value): Moves an element along the z-axis.
See the Pen by WidgetCore (@WidgetCore) on CodePen.
II. Rotate
The rotate() function rotates an element around the fixed point. It rotates around the center by default. This function accepts only one parameter that is an angle. The angle can be specified in either radians, turns, or gradians. Moreover, Any unit chosen by the user should be specified with the numerical value.
Syntax: transform: rotate_function(values);
The rotate has the following functions:
- rotate(angle): To rotate an element by a specified angle.
- rotateX(angle): To rotate an element by a specified angle along the x-axis.
- rotateY(angle): To rotate an element by a specified angle along the y-axis.
See the Pen by WidgetCore (@WidgetCore) on CodePen.
III. Scale
With the scale() function, the element’s dimension can be scaled up or down without changing its coordinates. It resizes the element. However this function accepts either one parameter or two parameters. So the first value resizes the element horizontally, and the second value also resizes the element but vertically.
Syntax: transform: scale_function(values);
The scale has the following functions:
- scale(value): Scales an element along the x-axis only.
- scale(value, value): Scales an element along the x-axis and the y-axis.
- scaleX(value): Scales an element along the x-axis.
- scaleY(value): Scales an element along the y-axis.
See the Pen by WidgetCore (@WidgetCore) on CodePen.
Note: Unlike translate() in scale(), we cannot specify the values as pixels. So, in the scale function, we need to specify the value as a scaling factor by which we need to expand or shrink the element.
So the range of possible values:
- 0: the element disappears
- 0.5: the element is half of its size.
- 1: the element reserve its original size.
- 2: the element becomes doubles the size.
- -1: the element is mirrored.
IV. Skew
The skew() function distorts an element or slants the element along also the line. It accepts either one parameter or two parameters. So the first value distorts the element horizontally, and the also second value distorts the element vertically.
Syntax: transform: skew_function(values);
The skew has the following functions:
- skew(X, Y): Skews an element at an angle x on the x-axis and an angle y on the y-axis.
- skewX(X): Skews an element at an angle x on the x-axis.
- skewY(Y): Skews an element at an angle y on the y-axis.
See the Pen by WidgetCore (@WidgetCore) on CodePen.
3. Conclusion
CSS animations are an excellent way to embed attractive elements onto the web page. It also provides an ease to animate the CSS style configuration to another. So CSS transform can transform the element to 2D or 3D. In brief transform is the collection of functions and it also allows us to shape an element in the desired way. Also CSS Transform has four functions: 1. Translate(), 2. Rotate(), 3. Scale(), 4. Skew().
Also in the other section of this tutorial, we will discuss the other animation categories with relevant examples. Meanwhile, if you have any questions or suggestions, please write us in the comment section below.
Happy Coding!
Some links on this page are affiliate links. This means that if you choose to make a purchase, we may earn a small commission at no extra cost to you. For more information, Go here
