The Complete CSS Animations Tutorial [With Examples]

Ravi Kumar

Posted On: November 28, 2023

view count187384 Views

Read time11 Min Read

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.

lt browser

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.

CSSAnimations

Info Note

Test your CSS Animations across 3000+ real environments. Try LambdaTest Today!

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.

 web page without worrying

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.

sdp

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.

CSS3 Transitions

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.

CSS at rule keyframes

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: