The Complete CSS Animations Tutorial [With Examples]

Animation can bring creativity, enthusiasm, grab the user’s attention, convey things quickly, and improve usability. Recently, there has been a rise in the use of animation on websites and web apps. CSS Animations are an excellent way to create visual animations that are not restricted to a single motion like CSS Transitions but are far more developed. With that thought in mind, CSS developers considered introducing them to their library as CSS Animations.

Indeed, we can build some stunning animations using JavaScript and jQuery, but this is an expensive approach. For example, processing speed, cross browser compatibility, and code complexity are considered when designing animated UI.

In this CSS Animations tutorial, we will learn the concept of CSS Animations and break the animation into smaller units to understand the underlying concept. Later, we would make CSS Animations and run them on the web page.

Let’s begin with our CSS Animations tutorial!

What Are CSS Animations?

CSS Animations are an important aspect of modern web design, allowing developers to bring life and interactivity to their web pages. The animation property in CSS has come a long way since its inception, with numerous improvements and optimizations made to make it easier and more efficient to use.

Before the introduction of the CSS animation property, developers used a variety of tools (or languages) like JavaScript, HTML5, GIFs, etc., to create animations on web pages.

These traditional animation methods require the CPU for rendering, making the process slower and more cumbersome. On the other hand, CSS Animations are hardware accelerated and use the GPU instead of the CPU – this makes them much faster and smoother compared to traditional JavaScript and other animation techniques and allows complex Animations to be displayed on web pages.

As web development technology has evolved, CSS Animations has become more popular and provides greater control and flexibility over the animation effects. A real-life example of this is Instagram, which uses the CSS infinite attribute to create a continuous scroll of content that dynamically updates as new posts are added.

Moving the CSS Animations provides better performance than JavaScript as the browser takes control and optimizes the animation for the performance. The properties that come with the CSS Animations can be divided into three major categories:

• Transformation – Transforming the dimensions, rescaling the objects, moving them from point A to B, etc.
• Transitions – Performing the transformations smoothly.
• Keyframes – Changing the animation (property, value, etc.) at a given time or state.

Once we have implemented the above three properties, we complete the CSS Animations. In this CSS Animations tutorial, we look at each one with relevant examples of CSS Animations.

Are Your CSS Animations Responsive?

In this CSS Animations tutorial, we will learn how to create CSS Animations and incorporate them into websites and web pages. However, when we create CSS Animations, we want them to be compatible with many screen sizes like smartphones, tablets, desktops, laptops, etc. To build a responsive web design with CSS Animations, we must perform a responsiveness test using a responsive web checker tool.

Frequently testing responsiveness with manual techniques can be cumbersome and expensive. Therefore, you should invest in robust and free responsive web checker tools like LT Browser to save time and quickly test web designs.

With LT Browser, you can perform mobile view debugging across 50+ pre-built device viewports, create custom device resolutions, network simulation, hot reloading, generate performance reports powered by Google Lighthouse, and much more.

Catch up with the latest tutorials on mobile app testing, real device testing, and more — Subscribe to the LambdaTest YouTube Channel.

Let’s access the responsiveness of the animation-delay property in LT Browser on mobile and tablet viewports.

Parts of CSS Animations

CSS Animations are achieved using keyframes, which define the styles of elements at different points in time.

The CSS animation property specifies the following:

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count

With keyframes and the animation property, developers can create various CSS Animations, from simple scrolling effects to complex interactive animations.

CSS Animations can be divided into the following categories:

• Transformation: The transform property in CSS is used to apply a 2D or 3D transformation to an element. This property can rotate, scale, skew, or translate the respective element.
• Transition: The transition property in CSS allows the developers to specify the transition between two states of an element. For example, you could define a transition that smoothly changes the background color of an element when it’s hovered over.
• Keyframes: Keyframes are a fundamental aspect of CSS Animations. Keyframes define the start and end points of an animation and specify the styles that the element should have at different points during the animation. Keyframes are defined using the @keyframes rule and are applied to elements using the animation property.

Let’s dive into these CSS Animations in more detail.

CSS Transform

The CSS transform property is a shorthand property used to apply a 2D or 3D transformation to an element. The transform property can scale, rotate, skew, and translate an element in a two-dimensional or three-dimensional.

The transform property can be defined as:

• none: No transformation is applied to the object.
• value: Assign a value such as a scale.
• inherit: Inherit the property from the parent element.
• initial: Set the value as the default value for the property assigned to the object.

The previously defined value portion determines how the object will be used. We can replace it with the below four parameters.

Translate

The CSS translate function allows developers to move an element along the X-axis (horizontally) or Y-axis (vertically) by a specified number of pixels. This can be useful for creating exciting CSS Animations or effects on a website.

Syntax:

Here are the translate options provided by animation in CSS:

• translate(value): Used to translate only along the X-axis.
• translate(value, value): Used to translate along the X and Y axes.
• translateX(value): Used to translate along the X-axis.
• translateY(value): Used to translate along the Y-axis.

HTML:

CSS:

See the Pen
A1_translate by ravi kumar (@ravikumar7210)
on CodePen.

The animation can either translate along the X-axis, Y-axis or in the both axis by giving both values (100px, 100px), and this can be observed by uncommenting the desired code section.

Scale

The CSS Scale function allows developers to change the size of an element. It takes two parameters: the Scale(x) and Scale(y) scaling factors, respectively. The values can be either positive or negative.

Negative values flip the element along the axis that you are scaling. For example, if you scale an element by -1 along the x-axis, it will flip horizontally. If you scale an element by -1 along the y-axis, it will flip the element vertically.

Unlike the translate function, we can’t use px, %, and em values in the scale function. Instead of changing the current dimensions, we must specify a scaling factor to either increase or decrease the size of an object.

Scaling value	Scaling
1	No scaling
2	Element size is doubled (X & Y axis)
0.5	Element size is halved (X & Y axis)

Syntax:

The scaling options provide the following values:

• scale(1.5, 0.5): Scale the object 1.5 times along X-axis and half the object along the Y axis
• scale(1): Scale the object in equal proportion in the both X and Y axes
• scaleX(2): Doubled the object in the X-axis.
• scaleY(-0.5): Flip the object vertically and halve the object in the Y axis.

Let’s see an example to see in action.

HTML:

CSS:

See the Pen
A2_Scale by ravi kumar (@ravikumar7210)
on CodePen.

The different sections of code demonstrate how to apply scaling in different directions such as X, Y, or both. Additionally, there are options to apply scaling in the forward or backward direction and uniform scaling in both X and Y directions.

Rotate

The rotate function allows developers to rotate an element about a fixed point in 2D space. You can use the rotate transformation to change the orientation of an element by a specified number of degrees.

The angle in rotate is specified in either degrees, gradians, radians, or turns. You can also specify the point of rotation using the transform-origin property. In this example, the transform origin is the Center.

Syntax:

• rotate(30): Rotate the object at 30 degrees.
• rotateX(90): Rotate the object at 90 degrees along the X-axis.
• rotateY(180): Rotate the object at 180 degrees along the Y-axis.

Let’s see an example to see in action.

HTML:

CSS:

See the Pen
A3_Rotate by ravi kumar (@ravikumar7210)
on CodePen.

The different sections of code demonstrate how to apply rotating in different directions such as X, Y, or both. Additionally, the animation is set to alternate between the colors specified in the from and to values of the @keyframes rule.

Skew

The skew function allows developers to skew an element in 2D space. Skew is used to slant an object at a specific angle. It can create various effects, such as tilting an element or creating a 3D effect.

The angle in rotate is specified in either degrees, gradians, radians, or turns.

Syntax:

• skew(30,60): Skew the object at an angle of 30 degrees on the X-axis and 60 degrees on the Y-axis.
• skewX(90): Skew the object at 90 degrees on the X-axis.
• skewY(180): Skew the object at 180 degrees on the Y-axis.

Let’s see an example to see in action:

HTML:

CSS:

See the Pen
A4_Skew by ravi kumar (@ravikumar7210)
on CodePen.

In this, the animation uses the transform property to apply a skew or slant effect to the square. The code includes three different CSS Animations variations, such as skew in the X, Y, and both axes.

Browser Compatibility

CSS transform enjoys excellent browser compatibility and is supported by all major browsers.

Source

So, you can use it and transform all the objects on the web page without worrying about cross-browser compatibility issues.

CSS Transition

CSS transitions allow developers to animate smoothly changes to an element’s style. This can add a dynamic and polished touch to our web pages and make our website feel more alive.

Transitions are created by specifying two styles for an element, one for its normal state and another for its hover state, and then using the transition property to control how the change from one state to another is animated over time.

Netflix uses CSS transitions to animate the play button on its website. When you hover over the play button, it changes from a solid color to a transparent color. This animation makes it clear to users that they can interact with the button.

You can use this property by specifying the duration, timing function, and delay of a transition, so that the change in property value occurs gradually over time instead of abruptly.

The transition property takes the following values:

• none: Used to signify that no property should make transitions.
• all: Used to signify all the properties that can transit or should transit.
• property_name: It’s defined as the name of the property where you want the transition to occur.

The transition property consists of four parameters:

• transition-delay
• transition-duration
• transition-property
• transition-timing-function

transition-duration

The transition-duration property specifies the length of time that a transition should take to complete. It works alongside the transition property to animate changes in an element’s property value changes. We can specify the duration in seconds or milliseconds.

It is important to specify the transition-duration property. If this property is not defined, the default value of zero is taken into consideration.

Syntax:

Let’s see an example.

HTML:

CSS:

See the Pen
A5_Transition_duration by ravi kumar (@ravikumar7210)
on CodePen.

In this scenario, two rectangular boxes are generated, and animation is implemented on each of them with specific time durations. Each box has a different time duration to show the difference in animation applied to the box.

The first box has a transition duration of 0, whereas the second box has a transition duration of 3 seconds.

The transition-timing-function property in CSS is used to specify the speed curve of a transition. It defines how the transition will progress over time, determining the rate at which the transition runs from start to finish. Several predefined values can be used with the transition-timing-function property like linear, ease-in, etc.

Syntax:

• linear: The transition has a constant speed.
• ease: The transition starts slowly, speeds up in the middle, and then slows down again at the end.
• ease-in: The transition begins at a slow pace and gradually accelerates.
• ease-out: The transition starts quickly and then slows down.
• ease-in-out: The transition starts slowly, speeds up in the middle, and slows down again at the end.
• cubic-bezier(): we can also create custom speed curves using the cubic-bezier() function. The cubic-bezier() function takes four values (x1, x2, y1, y2, four points of the curve) that define a cubic Bézier curve, which can be used to create a custom speed curve for the transition.

By choosing the right value for the transition-timing-function property, you can control the speed and progression of your transitions and create a variety of different CSS Animations effects.

Let’s see an example to see in action:

HTML:

CSS:

See the Pen
A6_Transition_timing_function by ravi kumar (@ravikumar7210)
on CodePen.

The div called container is created with five child elements. Each child element has a different timing function set for its transition effect. On hover, the child elements increase their width, change the background color, and font weight. The container has a fixed size and is positioned at the centre of the page.

transition-delay

The transition-delay property in CSS specifies the time that should elapse before a transition starts. The transition-delay property is specified in seconds or milliseconds, and it determines how long to wait before the transition begins after the property being transitioned has changed.

You can also use negative values with the transition-delay property. For example, a transition delay of –0.5s would cause the transition to start immediately and run in reverse for 0.5 seconds. This animation technique can create CSS Animations that begin with a rewind effect.

Syntax:

HTML:

CSS:

See the Pen
A7_Transition_delay by ravi kumar (@ravikumar7210)
on CodePen.

A simple div is created with two child elements. The first child element has a transition delay of 2 seconds and the second child element has a delay of 0.5s before the transition effect is applied. On hover, both the child elements scale over the value of 2 with the transition delay effect.

Browser Compatibility

CSS transition enjoys excellent browser compatibility and is supported by all major browsers.

Source

CSS Keyframes

CSS keyframes are a property that allows developers to define the state of an element at various points in time during CSS Animations. This is achieved by using keyframes, which are essentially snapshots of the state of an element at a specific moment in time.

By defining these keyframes, one can create an animation that transitions between the start and end points of the animation, effectively animating the element from one state to another.

Keyframes can be utilized to achieve CSS Animations in two distinct methods.

Keyframe using from-to keywords

The from and to keywords are used in CSS keyframe animations to define the starting and ending points of an animation.

In a keyframe animation, the from keyword specifies the initial state of the animated element, while the to keyword specifies the final state. These states can include styles such as position, color, opacity, and more.

Syntax:

HTML:

CSS:

See the Pen
A8_keyframes_from-to by ravi kumar (@ravikumar7210)
on CodePen.

The above code contains a single div element, which is set to animate using the keyframes property. The animation scales the div element from its initial size to double its size over a 3-second period with the help of keyframes from (initial value of scale is 1) to ( final value of scale is 2) property, and then back to its original size, and repeats the animation infinitely.

Keyframe using percentages

In addition to using the from and to keywords, CSS keyframe animations can also use percentages to specify intermediate states in the animation. These percentage assignments represent the progress of the animation and can be used to specify styles at specific points in the animation timeline.

In this example, the 0% assignment specifies the initial position of the element at the start of the animation, the 50% assignment specifies the position of the element halfway through the animation, and the 100% assignment specifies the final position of the element at the end of the animation.

The CSS Animations will smoothly transition from one state to the next over the specified duration of time.

Syntax:

HTML:

CSS:

See the Pen
A9_keyframes_percentage by ravi kumar (@ravikumar7210)
on CodePen.

The image is animated using the keyframes property. The animation makes the div element move in a square path on the screen, returning to its original size, and repeating the animation indefinitely.

To achieve this animation, the keyframes use percentage values that allow setting the animation at different time intervals, such as 25% or 50%. This provides more precise control over how the animation behaves. This level of control is not possible with the simpler keyframes from to to property.

Browser Compatibility

The browser compatibility for CSS keyframes is great, and the function is supported in all browsers.

Source

So, you can use it and transform all the objects on the web page without worrying about cross-browser compatibility issues.

CSS Animation Sub Properties

In the above section, we have already discussed the transform, transition, and keyframe properties. All these properties are combined and used to make the animation. But with the evolution of web pages, more than these properties are needed to make CSS Animations, so here is where the CSS animation property comes in.

It makes the work easier and more efficient with the help of the properties mentioned above. So now, we will discuss the CSS Animations and their sub-properties.

Here are the different properties of CSS Animations.

animation-name

The animation-name property is used to specify the name of the @keyframes rule used to animate the element, and comma-separated values can be employed to include multiple CSS Animations. The value of this property is the name of the keyframes rule.

Syntax:

HTML:

CSS:

See the Pen
A10_animation_name by ravi kumar (@ravikumar7210)
on CodePen.

The above code defines a basic div container and three div elements with the class ball inside the container. The animation is achieved by utilizing a keyframe animation named my-animation that employs the transform property to vertically move the balls vertically. The animation is applied to the container div with an infinite iteration count and a duration of 3 seconds.

animation-duration

The animation-duration property specifies the length of time that the animation should take to complete. The animation-duration property can be expressed in seconds (s) or milliseconds (ms). If a negative value is used, it will be treated as zero.

Syntax:

HTML:

CSS:

See the Pen
A11_animation_duration by ravi kumar (@ravikumar7210)
on CodePen.

In the above code a simple div is created in which three nested div elements have been created which has the class ball. When the user hovers over the container, a keyframe animation called my-animation applies to all the balls with a linear timing function.

The animation consists of multiple steps that translate the balls vertically using the transform property. Each ball has a different animation duration, ranging from 2 to 6 seconds.

animation-timing-function

The animation-timing-function property specifies the speed curve of the animation, determining how the animation should progress over time. There are several predefined timing functions, such as linear, ease, ease-in, ease-out, and ease-in-out.

Syntax:

HTML:

CSS:

See the Pen
A12_animation_timing_function by ravi kumar (@ravikumar7210)
on CodePen.

This code creates a container with five balls that move across the container horizontally with different animation speeds. This CSS animation repeats infinitely.

The balls have different IDs, and each ID has its own animation-timing-function property: linear, ease, ease-in, ease-out, and ease-in-out. You can see the difference in animation between each child element.

animation-delay

The animation-delay property specifies the time that should elapse before the animation starts.

The animation-delay property can accept negative values, but in such cases, the animation will begin instantly instead of waiting for the specified delay duration. This property can be defined in seconds (s) or milliseconds (ms).

Syntax:

HTML:

CSS:

See the Pen
A13_animation_delay by ravi kumar (@ravikumar7210)
on CodePen.

This above code has one div called container in which there are two nested divs with a class called ball. The animation is a translation that moves the balls horizontally across the container with an infinite iteration count.

The first ball starts moving immediately, while the second ball starts moving 2 seconds after the page is loaded because on the second ball animation-delay property is applied.

animation-iteration-count

The animation-iteration-count property specifies the number of times the animation should be repeated. The value of this property can be a number, such as 2, or the keyword infinite to indicate that the animation should repeat indefinitely.

Positive decimal values, such as 0.5, can also specify that only half of the animation should be played. Negative numbers, however, are not considered valid.

Syntax:

HTML:

CSS:

See the Pen
A14_animation_iteration_count by ravi kumar (@ravikumar7210)
on CodePen.

This above code has one div called container in which there are three nested divs with a class called ball. The balls have a hover translate animation that moves the balls vertically according to a keyframe animation defined.

The first ball moves once, the second ball moves twice, and the third ball moves thrice, as defined by the animation iteration count property.

animation-direction

The animation-direction property specifies the direction in which the animation should be played. The possible values for this property include normal, reverse, alternate, and alternate-reverse .

Syntax:

• normal: The animation progresses forward from the beginning to the end.
• reverse: The animation plays backward, starting from the end and going back to the start.
• alternate: The animation plays forward, then backward, then forward again, and so on.
• alternate-reverse: The animation plays backward, then forward, then backward again, and so on.

HTML:

CSS:

See the Pen
A15_animation_direction by ravi kumar (@ravikumar7210)
on CodePen.

This above code has one div called container in which there are four nested divs, each with a unique ID and the class ball. The animation is a translation that moves the balls horizontally across the container with an infinite iteration count. Each ball is animated using the keyframes named “my-animation”.

Each ball div has a unique ID and is assigned a different animation-direction value, such as normal, reverse, alternate, and alternate-reverse values.

animation-fill-mode

The animation-fill-mode property specifies the values that should be applied to the element when the animation is not running. The possible values for this property include none, forwards, backwards, and both.

Syntax:

• none: The default value. There are no styles applied before or after the animation in this case.
• forwards: The final styles of the animation are applied to the element after the animation has been completed.
• backwards: The starting styles of the animation are applied to the element before the animation starts.
• both: Both the starting and final styles of the animation are applied to the element, before and after the animation, respectively.

HTML:

CSS:

See the Pen
A16_animation_fill_mode by ravi kumar (@ravikumar7210)
on CodePen.

The above code includes a container with three cards, each of which has a title, a ball element, and an animation-fill-mode property with a different value. The animation-fill-mode property controls what happens before and after the animation runs. The three cards demonstrate the three different values of animation-fill-mode: forwards, backwards, and both.

animation-play-state

The animation-play-state property in CSS is used to specify whether an animation is running or paused. It can accept any of the following values:

animation-play-state running

running: Animation state is running (default)

Syntax:

HTML:

CSS:

See the Pen
A17-play _state_running by ravi kumar (@ravikumar7210)
on CodePen.

The provided code is a demonstration of a basic animation that generates a hover effect on a ball. As soon as the container div is hovered over, the ball shifts based on a predefined set of animation properties through keyframes. The initial animation state is set to running, and it halts when the container is hovered over, then resumes again once the hovering ceases.

animation-play-state paused

paused: The animation state is paused. It will resume only when the pause is removed

HTML:

CSS:

See the Pen
A18-play_state_paused by ravi kumar (@ravikumar7210)
on CodePen.

The provided code is a demonstration of a basic CSS Animation that generates a hover effect on a ball. As soon as the container div is hovered over, the ball shifts based on a predefined set of animation properties through keyframes. The initial animation state is set to paused and it starts running when the container is hovered over and then paused again once the hovering ceases.

That’s All!

CSS Animations are a great way to embed attractive elements onto your web page and improve the user experience. This CSS Animations tutorial highlighted the building blocks of CSS Animations with examples. These are all the things that are required to build an animated browser compatible website and web apps. To perform cross browser compatibility testing of CSS animated websites and web apps, you can try out LambdaTest – an AI-powered test orchestration and execution platform that offers 3000+ browsers and OS combinations to test your websites and web applications for browser compatibility.

The possibilities are endless when working with CSS Animations. But more ideas give birth to more attractive designs, and we welcome all those suggestions from our readers. Comment your CSS animation designs below and help the developer community enhance their skills.

Happy Animation!