CSS animations control the movement and appearance of elements on web pages. We can animate HTML elements without using JavaScript.
CSS Animation Properties
CSS animations involve several key properties:
Property
| Description
|
|---|
@keyframes
| The @keyframes rule in CSS is used to specify the animation rule.
|
|---|
animation-name
| It is used to specify the name of the @keyframes describing the animation.
|
|---|
animation-duration
| It is used to specify the time duration it takes animation to complete one cycle.
|
|---|
animation-timing-function
| It specifies how animations make transitions through keyframes. There are several presets available in CSS which are used as the value for the animation-timing-function like linear, ease,ease-in,ease-out, and ease-in-out.
|
|---|
animation-delay
| It specifies the delay of the start of an animation.
|
|---|
animation-iteration-count
| This specifies the number of times the animation will be repeated.
|
|---|
animation-direction
| It defines the direction of the animation. animation direction can be normal, reverse, alternate, and alternate-reverse.
|
|---|
animation-fill-mode
| It defines how styles are applied before and after animation. The animation fill mode can be none, forwards, backwards, or both.
|
|---|
animation-play-state
| This property specifies whether the animation is running or paused.
|
|---|
@keyframes Rule
The @keyframes rule defines how an element’s styles change over time during an animation.
Syntax
@keyframes animation-name {
from {
/* Initial Styles */
}
to {
/* Final Styles */
}
}- The from defines the starting styles, and to defines the ending styles.
- You can also use percentage values to specify intermediate steps.
HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: changeColor 3s infinite;
}
@keyframes changeColor {
from {
background-color: blue;
}
to {
background-color: green;
}
}
</style>
<!--Driver Code Starts{-->
</head>
<body>
<div class="box"></div>
</body>
</html>
<!--Driver Code Ends }-->
- The .box class creates a blue square and applies the changeColor animation that lasts 3 seconds and repeats infinitely.
- The @keyframes changeColor rule changes the background color from blue to green.
animation-name Property
The animation-name property specifies the name of the @keyframes animation to apply to an element.
Syntax
animation-name: animationName;
HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
animation-name: moveRight;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
}
</style>
<!--Driver Code Starts{-->
</head>
<body>
<div class="box"></div>
</body>
</html>
<!--Driver Code Ends }-->
In this example
- The .box class applies the moveRight animation to the <div>.
- The animation-name links the element to the @keyframes moveRight sequence.
- The box moves horizontally from its original position to 200px to the right over 2 seconds, repeating infinitely.
animation-timing-function property
The animation-timing-function property controls the speed curve of an animation, defining how the animation progresses over its duration.
Syntax
animation-timing-function: timingFunction;
HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
animation-name: slide;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
}
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(300px);
}
}
</style>
<!--Driver Code Starts{-->
</head>
<body>
<div class="box"></div>
</body>
</html>
<!--Driver Code Ends }-->
In this example
- The .box class applies the slide animation to the <div>.
- The animation-timing-function: ease-in; makes the animation start slowly and then speed up.
animation-delay property
The animation-delay property specifies a delay before an animation starts, controlling when the animation begins after being triggered.
Syntax
animation-delay: time;
HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
animation-name: fadeIn;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
<!--Driver Code Starts{-->
</head>
<body>
<div class="box"></div>
</body>
</html>
<!--Driver Code Ends }-->
In this example
- The .box element is set to fade in using the fadeIn animation.
- The animation-delay: 1s; delays the start of the animation by one second.
- The animation lasts for 2 seconds and repeats infinitely.
animation-iteration-count property
The animation-iteration-count property specifies how many times an animation should repeat.
Syntax
animation-iteration-count: number | infinite;
HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: bounce 2s infinite;
}
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-50px);
}
100% {
transform: translateY(0);
}
}
</style>
<!--Driver Code Starts{-->
</head>
<body>
<div class="box"></div>
</body>
</html>
<!--Driver Code Ends }-->
In this example
- The .box element uses the bounce animation that lasts 2 seconds.
- animation-iteration-count: infinite; makes the animation loop endlessly.
animation-direction property
The animation-direction property specifies whether an animation should play forward, backward, or alternate between the two directions.
Syntax
animation-direction: normal | reverse | alternate | alternate-reverse;
HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: move 2s infinite;
animation-direction: alternate;
}
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
}
</style>
<!--Driver Code Starts{-->
</head>
<body>
<div class="box"></div>
</body>
</html>
<!--Driver Code Ends }-->
In this example
- The .box element moves from its original position to 200px to the right.
- animation-direction: alternate; makes the animation play forward on the first iteration and then backward on the next, creating a back-and-forth motion.
animation-fill-mode property
The animation-fill-mode property specifies how a CSS animation should apply styles to its target before and after it is executing.
Syntax
animation-fill-mode: none | forwards | backwards | both;
HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: move 3s forwards;
}
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
}
</style>
<!--Driver Code Starts{-->
</head>
<body>
<div class="box"></div>
</body>
</html>
<!--Driver Code Ends }-->
In this example
- The .box element moves from its original position to 200px to the right over 3 seconds.
- animation-fill-mode: forwards; ensures that the box retains the final state of the animation after it completes.
animation-play-state property
The animation-play-state property controls whether an animation is running or paused.
Syntax
animation-play-state: running | paused;
HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: spin 4s linear infinite;
animation-play-state: paused;
}
.box:hover {
animation-play-state: running;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
<!--Driver Code Starts{-->
</head>
<body>
<div class="box"></div>
</body>
</html>
<!--Driver Code Ends }-->
In this example
- The .box element has a spin animation that rotates it 360 degrees over 4 seconds infinitely.
- animation-play-state: paused; initially pauses the animation.
Animation Shorthand Property
The animation shorthand property allows you to set all animation-related properties in a single declaration, making your CSS code cleaner and more concise.
Syntax
animation: [animation-name] [animation-duration] [animation-timing-function]
[animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode]
[animation-play-state];
HTML
<!--Driver Code Starts{-->
<html>
<head>
<!--Driver Code Ends }-->
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: move 2s ease-in 1s infinite alternate forwards;
}
@keyframes move {
from {
transform: translateX(0);
background-color: blue;
}
to {
transform: translateX(200px);
background-color: green;
}
}
</style>
<!--Driver Code Starts{-->
</head>
<body>
<div class="box"></div>
</body>
</html>
<!--Driver Code Ends }-->
In this example
- The .box class uses the animation shorthand to apply the move animation.
- The animation lasts for 2 seconds, starts after a 1-second delay, runs infinitely, alternates direction, and retains the final state.
- The box moves from its original position to 200px to the right and changes color from blue to green smoothly.
Best Practices for CSS Animations
- Use Animations Purposefully: Apply animations to enhance user experience without causing distractions.
- Animate Performance-Friendly Properties: Prefer animating properties like transform and opacity for smoother performance.
- Ensure Accessibility: Provide options for users to reduce or disable animations to accommodate those with motion sensitivities.
Similar Reads
CSS Tutorial
CSS stands for Cascading Style Sheets. It is a stylesheet language used to style and enhance website presentation. CSS is one of the main three components of a webpage along with HTML and JavaScript.HTML adds Structure to a web page.JavaScript adds logic to it and CSS makes it visually appealing or
6 min read
CSS Introduction
CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable. It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.The main advantages are the separation of content (in HTML) and styling (in CSS) and the
5 min read
CSS Syntax
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML. Understanding CSS syntax is fundamental for creating visually appealing and well-structured web pages. Basic CSS SyntaxCSS is written as rulesets. A ruleset consists of a selector a
6 min read
CSS Selectors
CSS selectors are used to target HTML elements on your pages, allowing you to apply styles based on their ID, class, type attributes, and more. There are mainly 5 types of selectors.Basic CSS Selectors: These are used to target elements by tag, .class, or #id for fundamental styling needs.Combinator
7 min read
CSS Comments
CSS comments are used to add notes or explanations to your code, helping you and others understand it better. They start with /* and end with */ and can be used for both single-line and multi-line comments. Note: Comments are ignored by browsers, so they won’t affect how your webpage looks or works.
2 min read
CSS Colors
CSS colors are used to set the color of different parts of a webpage, like text, background, and borders. This helps make the page look more attractive and easier to read. You can define colors using names, hex codes, RGB values, and more. You can try different formats of colors here- #content-ifram
6 min read
CSS Borders
Borders in CSS are used to create a visible outline around an element. They can be customized in terms of Width: The thickness of the border.Style: The appearance of the border (solid, dashed, dotted, etc.).Color: The color of the border.You can try different types of borders here- #custom-iframe{ h
6 min read
CSS Margins
CSS margins are used to create space around an element, separating it from neighboring elements and the edges of the webpage. They control the layout by adjusting the distance between elements, providing better organization and readability. Syntax:body { margin: value;}[GFGTABS] HTML <!--Driver C
4 min read
CSS Height and Width
Height and Width in CSS are used to set the height and width of boxes. Their values can be set using length, percentage, or auto. Width and HeightThe width and height properties in CSS are used to define the dimensions of an element. The values can be set in various units, such as pixels (px), centi
4 min read
CSS Outline
CSS outline is a property used to draw a line around an element's border. It does not affect the layout, unlike borders. It's often used to highlight elements, providing a visual emphasis without altering the dimensions of the element. Syntaxselector{ outline: outline-width outline-type outline-colo
4 min read