CSS Transitions: CSS Animations Complete Tutorial

CSS animation property provides an ease to animate other CSS properties, such as opacity, color, height, background color, and many more. Animation properties animate the CSS transitions 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 Transitions in CSS with relevant examples.

Also, if you don’t know much about CSS -Transform, , then refer to our previous blog, which will provide a more profound understanding of Transform.

CSS Animation – Transition

Through transform, we can easily rotate, scale or translate our 2D or 3D elements. However, we can have an animated effect with transform by combining more than one shape, but that doesn’t look smooth. We want our animation to be seamless. And we can achieve this when our transition from the beginning to the end happen smoothly.

What is CSS Transition?

CSS Transition allows you to change other CSS properties values smoothly over a given duration. It also provides a way to control the speed of the animation while changing the CSS properties.

It comprises four properties:

1. transition-property

It specifies the name of the CSS property on which the transition will be applied. For example, we want to apply transition on the height of the box so that whenever we hover on the box, its height increases. So here, transition-property is height.

If you use shorthand property as a transition-property, then the transition is applied to all the sub-properties and attributes of that shorthand property. For example, the border is one such property and have sub-properties and attributes.

Transition-property can have the following values:

i. none: This signifies that no property can make a transition.

ii. all: This signifies that all property can make a transition. However, not all properties can be animated, so check a list of animatable properties provided by CSS before animating any property.

iii. <custom-property-name>: It specifies the name of the CSS property on which you want to make the transition.

Syntax:

transition-property: property-name;

See the Pen by WidgetCore (@WidgetCore) on CodePen.

2. transition-duration

This property specifies the duration in which the transition needs to be completed. Higher the transition-duration value slower the transition.

Note: If no value is specified, then it will take the default value of 0.

Syntax:

transition-duration: value with time unit;

See the Pen by WidgetCore (@WidgetCore) on CodePen.

3. transition-timing-function

This property allows you to decide the speed of the transition. You can set various speeds like start slow, increase in the middle and then end slowly.

Transition-timing-function provides the following values:

i. ease: The transition starts slowly and then increases the speed till the middle of the transition. After the middle, the speed decreases gradually till the end.

ii. ease-in: The transition starts slowly, and the speed keeps on increases till the end.

iii. ease-out: The transition starts quickly, and the speed keeps on decreases till the end.

iv. ease-in-out: The transition starts slowly, and the speed keeps on increases till the middle. After the middle of the transition, the speed keeps on decreases gradually.

v. linear: The transition starts, moves and ends at the same pace.

vi. steps(n, jump-term):  The step function display transitions in a series of steps. Here “n” denotes the number of steps while “jump-term” denotes how to divide the number of steps from 0% to 100% in the transition.

The jump-term can have the following value:

vii. start: Same as a jump-start.

viii. end: Same as jump-end.

ix. step-start: It equals steps(1, start).

x. step-end: It equals steps(1, end).

Syntax:

transition-timing-function: value;

See the Pen by WidgetCore (@WidgetCore) on CodePen.

4. transition-delay

This property allows you to set the delay, i.e., the wait time before the start of the transition.

Syntax:

transition-delay: value with time units;

See the Pen by WidgetCore (@WidgetCore) on CodePen.

Conclusion

 CSS transitions change CSS properties values smoothly from start to end over a given duration. With the help of CSS transitions, we can achieve seamless animations.

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!