HomeResourcesSoftware DevelopmentThe Ultimate CSS Tutorial for BeginnersCSS Animation: Everything You Need To Know About It

Tutorial Playlist

CSS Animation: Everything You Need To Know About It

Lesson 12 of 22By Aryan Gupta

Last updated on Jan 19, 202312912
Everything You Need to Know About CSS Animation

Table of Contents

View More

CSS stands for cascading style sheet and it is used to design a website. HTML makes the website structure, but CSS is what is used to attract that design. In this tutorial, you will look into CSS Animations.

What are CSS Animations?

CSS animations are a way to create a visual animation effect using the Cascading Style Sheets (CSS) language. They allow you to animate the properties of an element, such as its size, color, or position, over a specified period.

How to Use Them or Add CSS?

There are a few different ways you can use or add CSS to your project:

1. Inline CSS: You can add CSS directly to an HTML element using the "style" attribute. For example:

<div style="color: red; font-size: 20px;">This text will be red and 30px in size</div>

2. External CSS file: You can create a separate CSS file and link it to your HTML file using the "link" element in the head of your HTML file. For example:

<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program
Want a Top Software Development Job? Start Here!

Configuring an Animation

To configure an animation, follow these steps:

  1. First, open the animation software you are using.
  2. Next, create a new project or open an existing one.
  3. Select the object or character that you want to animate.
  4. Set the timeline for the animation by determining the length and the number of frames.
  5. Choose the type of animation you want to create, such as keyframe or motion graphics.

Browser Support for Animations

It is essential to consider browser support when creating animations, as some users may not be able to view the animations if their browser does not support it.

The following browsers generally have good support for animations:

  • Google Chrome
  • Mozilla Firefox
  • Microsoft Edge
  • Apple Safari

CSS Animation

The CSS animation property is used to create animations on a web page. You can change as many CSS properties as you want. And you can do this as many times as you want. 

Syntax: 

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

CSS Animation Properties

Property

Description

@keyframes

It is used to specify the animations

animation

It is a shorthand property that is used to set all the other properties

animation-delay

It sets when the animation will start

animation-duration

It specifies how long the animation should take to complete one cycle

animation-direction

It sets whether the animation should play in forward, backward, or alternate cycles 

animation-fill-mode

It specifies how a CSS animation should apply styles to its target, before and after it is executing

animation-play-state

This indicates if the animation is currently running or paused

animation-name

It is used to mention the name of the @keyframes defined animations that should apply to the selected elements

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program
Want a Top Software Development Job? Start Here!

Defining the Animation Sequence Using Keyframes

Keyframes used to define the animation sequence in a digital media project. They mark specific points in the timeline where a change in the animation occurs, change the positions, rotation, or scale of an object. 

@keyframes rule

@keyframes rule { 0% { transform: rotate(0deg); } 

100% { transform: rotate(360deg); } }

Setting Multiple Animation Property 

To set multiple animation property values, you can use the following syntax:

animation: <animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count> <animation-direction> <animation-fill-mode> <animation-play-state>;

For Example:

animation: fadeIn 2s ease-in-out 0s infinite normal forwards running;

It will set the animation name to "fadeIn," the duration to 2 seconds, the timing function to "ease-in-out," the delay to 0 seconds, the iteration count to infinite, the direction to "normal," the fill mode to "forwards," and the play state to "running."

Animation-Name

It is used in conjunction with the animation-duration and animation-iteration-count properties to define the animation's behavior.

Animation-Duration

The "animation-duration" property specifies the length of time that an animation should take to complete. It can be set in seconds or milliseconds, depending on the needs of the animation's. By adjusting the duration, designers can control the speed at which an animation plays, allowing for a wide range of creative possibilities. It is essential to consider when designing animations for web pages, as it can impact the overall user experience.

Animation-Delay

The animation-delay property specifies a delay before an animation starts. It can create a more dynamic and engaging user experience. The value for this property can in seconds or milliseconds, and it determines how long to wait before beginning the animation. It is important to note that this property only affects the time of the animations and does not affect the duration animations themselves.

Set How Many Times an Animation Should Run? (Animation-Iteration-Count)

To set how many times an animation should run, you can use the "animation-iteration-count" property. This property allows you to specify the number of times an animation should repeat. For example, if you want the animation to run twice, you can set the "animation-iteration-count" property to "2". You can also set it to "infinite" if you want the animation to run indefinitely. The syntax for this property is as follows:

animation-iteration-count: 2;

or

animation-iteration-count: infinite;

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program
Want a Top Software Development Job? Start Here!

Run Animation in Reverse Direction or Alternate Cycles (Animation Direction)

To run an animation in reverse directions, you can use the "animation-direction" property. This property allows you to specify the directions in which the animations should run. For example, if you want the animations to run in reverse, you can set the "animation-direction" property to "reverse." If you want the animations to run in alternate cycles, you can set it to "alternate." The syntax for this property is as follows:

animation-direction: reverse;

or

animation-direction: alternate;

Specify the Speed Curve of the Animation (Animation-Timing-Function) 

To specify the speed curve of an animation, you can use the "animation-timing-function" property. This property allows you to control the speed of the animation as it progresses. You can specify a variety of speed curves, such as linear, ease-in, ease-out, or ease-in-out. The syntax for this property is as follows:

animation-timing-function: linear;

or

animation-timing-function: ease-in;

or

animation-timing-function: ease-out;

or

animation-timing-function: ease-in-out;

Specify the Fill Mode for an Animation (Animation-Fill-Mode)

 There are four possible options for the fill mode:

  1. "none": It is the default value, which means that the element will return to its original state once the animation has finished.
  2. "forwards": With this option, the element will maintain the style values applied during the animation's last keyframe.
  3. "Backward": This option will cause the element to immediately adopt the style values from the first keyframe of the animation and then maintain those values until the animation begins.

Animation Shorthand Property

The animation shorthand property is a CSS property that allows developers to specify multiple animation properties in a single line of code. This can be useful for concisely defining the behavior of an element's animation, such as its duration, easing, and iteration count. The syntax for the animation shorthand property is as follows:

animation: <animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count> <animation-direction> <animation-fill-mode> <animation-play-state>;

Become a Certified UI UX Expert in Just 5 Months!

With The Best-in-class UI UX ProgramExplore Program
Become a Certified UI UX Expert in Just 5 Months!

Using Animation Events

Animation events are a helpful game development tool and can trigger specific actions or behaviors during an animation sequence. For example, the animation event is used to play a sound effect when a character lands a punch or activate a particle effect when a character uses a special attack. Animation events can be added to a character's animation clip in a game engine and triggered at a specific point in the animation timeline. It allows developers to fine-tune the timing and sequence of events within an animation, enhancing the overall gameplay experience for players.

Adding the Animation Event Listeners

To use animation events, you must first add listeners to your script that will listen for the specific events you have defined in your animation clip. This is done by creating a function that is called when the event is triggered and assigning this function to the event in the animation clip.

For example, let's say you have a character with a punch animation, and you want to play a sound effect when the character's fist collides with an enemy. First, you would create a function in your script that plays the effect, and then you would add an animation event to the point in the animation where the fist collides with the enemy. In the animation event, you would assign the function that plays the sound effect as the event listener.

Receiving the Events

To receive the events triggered by animation, you must have a script attached to the game object it is playing the animations. This script must contain a function called when the event is triggered.

For example, let's say you have a character with a punch animation, and you want to play a sound effect when the character's fist collides with an enemy. 

CSS Animation Example 1

css-animation-1.

css-animation-2

In this example, 0% is the beginning of the animation and 100% is the end.

Note: If the duration for the animation is not defined, it will fail to run, as the default value set for the duration is 0s.

css-animation-3

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program
Want a Top Software Development Job? Start Here!

CSS Animation Example 2

css-animation-4

Here, the ease-out value is used to set the animation with a slow end.

The CSS animation-iteration-count property indicates  the no. of times the animation currency i use should play normally. The default value set for the CSS animation-iteration-count is 1.

The CSS animation-fill-mode property defines the element’s style when the animation isn’t active.

css-animation-5

Get skilled in HTML5 and CSS3 with the Full Stack Java Developer Master's Program. Click to check out the program details! 

Conclusion

So in this CSS animation tutorial, you learned about several values of the animation property, and how you can use them to animate the elements on a web page. 

If  you want to enhance your knowledge of CSS and master its practical applications, Simplilearn's Postgraduate Program in Full Stack Web Development is one that you should definitely explore. This comprehensive bootcamp course is in collaboration with Caltech CTME, and will help you today’s most effective coding techniques and software development skills from the ground up - helping you gain all that you will need to become a successful, world-class full-stack technologist today..

If you have any feedback or questions for us on the CSS animation tutorial, do reach out to us by sharing them in the comments section you find at the bottom of this page. Our team of SMEs will review them, and share responses to them, very soon.

Happy learning!

About the Author

Aryan GuptaAryan Gupta

Aryan is a tech enthusiast who likes to stay updated about trending technologies of today. He is passionate about all things technology, a keen researcher, and writes to inspire. Aside from technology, he is an active football player and a keen enthusiast of the game.

View More
  • Acknowledgement
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, OPM3 and the PMI ATP seal are the registered marks of the Project Management Institute, Inc.