Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Shorthand property to set all the animation properties with CSS
The CSS animation property is a shorthand that allows you to set multiple animation properties in a single declaration. It combines animation duration, name, timing function, delay, iteration count, direction, fill mode, and play state into one convenient property.
Syntax
selector {
animation: duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name;
}
Possible Values
| Property | Description | Default |
|---|---|---|
animation-name |
Specifies the name of the @keyframes rule | none |
animation-duration |
Specifies how long the animation takes | 0s |
animation-timing-function |
Specifies the speed curve | ease |
animation-delay |
Specifies when the animation starts | 0s |
animation-iteration-count |
Specifies how many times to play | 1 |
animation-direction |
Specifies the direction of animation | normal |
Example: Basic Animation Shorthand
The following example demonstrates a simple color transition using the animation shorthand property −
<!DOCTYPE html>
<html>
<head>
<style>
.animated-box {
width: 150px;
height: 100px;
background-color: yellow;
margin: 20px;
animation: colorChange 2s ease-in-out infinite alternate;
}
@keyframes colorChange {
from {
background-color: green;
}
to {
background-color: blue;
}
}
</style>
</head>
<body>
<div class="animated-box"></div>
</body>
</html>
A yellow box smoothly transitions from green to blue and back repeatedly. The animation runs for 2 seconds in each direction with an ease-in-out timing function.
Example: Complex Animation with Multiple Properties
This example shows how to use multiple animation properties in the shorthand syntax −
<!DOCTYPE html>
<html>
<head>
<style>
.complex-animation {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
margin: 50px;
animation: moveAndRotate 3s linear 1s 2 alternate forwards;
}
@keyframes moveAndRotate {
0% {
transform: translateX(0) rotate(0deg);
background-color: red;
}
50% {
transform: translateX(200px) rotate(180deg);
background-color: yellow;
}
100% {
transform: translateX(400px) rotate(360deg);
background-color: green;
}
}
</style>
</head>
<body>
<div class="complex-animation"></div>
</body>
</html>
A red circle moves 400px to the right while rotating 360 degrees and changing color from red to yellow to green. The animation lasts 3 seconds, starts after a 1-second delay, runs twice in alternate directions with linear timing.
Conclusion
The animation shorthand property provides a clean and efficient way to define complex animations. It combines all animation-related properties into a single declaration, making your CSS more concise and easier to manage.
Updated on: 2026-03-15T12:44:09+05:30
236 Views
Advertisements