CSS Animations is a feature in Cascading Style Sheets (CSS) that lets you animate elements in HTML documents using only CSS without needing JavaScript.
To utilize animation properties, use @keyframes. Define a name within curly brackets {}, specifying start and end points with 'from' to 'to'. Alternatively, use percentages like 0% for 'from' and 100% for 'to'.
@keyframes name {
from {
CSS property: value;
}
to {
CSS property: value;
}
}
OR
@keyframes name {
0% {
CSS property: value;
}
50% {
CSS property: value;
}
100% {
CSS property: value;
}
}The animation-name
For the animation to display, the keyframe name must be included in the selector. Always specify an animation-duration property; otherwise, the animation won't activate. Additionally, set the position to either relative or absolute.
<head>
<style>
body {
background-color: whitesmoke;
font-family: sans-serif;
}
.box {
height: 150px;
width: 150px;
background-color: teal;
position: absolute;
animation-name: round;
animation-duration: 5s;
}
@keyframes round {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<h1>The animation-name Property</h1>
<div class="box"></div>
</body>
The animation-duration
The animation duration determines the length of time, in seconds or milliseconds, for the animation to complete. It should be specified after the animation name in the shorthand animation property.
<head>
<style>
body {
background: WhiteSmoke;
font-family: sans-serif;
}
#four-square {
width: 150px;
height: 150px;
background: thistle;
position: absolute;
animation: square infinite;
animation-duration: 2000ms;
}
@keyframes square {
from {
right: 0px;
}
to {
right: 300px;
}
}
</style>
</head>
<body>
<h1>The animation-duration Property</h1>
<div id="four-square"></div>
</body>
The animation-time-function
The animation-timing function determines the speed, how to keep it in the beginning, how to keep it in the middle, and how to keep it in the end.
The animation-timing function is written after the animation duration in the shorthand animation property. The value determines the speed.
<head>
<style>
body {
background-color: whitesmoke;
}
div {
height: 30px;
width: 100px;
border-radius: 5%;
background: thistle;
text-align: center;
position: absolute;
border: 1px solid black;
animation: square 5s infinite;
}
.box1 {
animation-timing-function: linear;
}
.box2 {
animation-timing-function: ease;
}
.box3 {
animation-timing-function: ease-in;
}
.box4 {
animation-timing-function: ease-out;
}
.box5 {
animation-timing-function: ease-in-out;
}
.box6 {
animation-timing-function: step-start;
}
.box7 {
animation-timing-function: step-end;
}
.box8 {
animation-timing-function: steps(6, start);
}
.box9 {
animation-timing-function: cubic-bezier(.7, -0.65, .37, 1.52);
}
@keyframes square {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h1> The animation-timing-function </h1>
<div class="box1">linear</div><br><br>
<div class="box2">ease</div><br> <br>
<div class="box3">ease-in</div><br><br>
<div class="box4">ease-out</div><br><br>
<div class="box5">ease-in-out</div> <br><br>
<div class="box6">step-start</div><br><br>
<div class="box7">step-end</div><br><br>
<div class="box8">step()</div><br><br>
<div class="box9">cubic-bezier()</div>
</body>
linear: Animation progresses at a constant speed from start to end.
ease: Default value; animation starts slow, speeds up in the middle, then slows down again.
ease-in: Animation begins slowly and accelerates as it progresses.
ease-out: Animation starts at normal speed and gradually slows down.
ease-in-out: Animation starts and ends slowly, with increased speed in the middle.
step-start: Animation pauses briefly at the beginning.
step-end: Animation pauses briefly at the end.
step(int, start | end): Defines specific steps for animation progression, with an optional start or end parameter.
cubic-bezier(): Customizable function for defining animation curves using control points, allowing for precise adjustments. Visit the cubic bezier to create your preferred animation curve.
The animation-delay
The animation-delay property determines the delay before an animation starts. For instance, setting it to 3s will commence the animation after 3 seconds.
In the following example, the square animation initiates after a 2-second delay:
<head>
<style>
body {
background-color: Whitesmoke;
}
.square {
width: 150px;
height: 150px;
background: teal;
position: absolute;
animation: square 3s infinite;
animation-delay: 2s;
}
@keyframes square {
from {
top: 80px;
}
to {
top: 300px;
}
}
</style>
</head>
<body>
<h1>The animation-delay</h1>
<div class="square"></div>
</body>
The animation-iteration-count
The animation-iteration-count property dictates how many times an animation should play. Setting it to 2 will play the animation twice. To play the animation indefinitely, use the keyword infinite.
<head>
<style>
.container {
background-color: #f2f2f2;
width: 45%;
height: 200px;
}
.container div {
width: 150px;
height: 150px;
background: thistle;
top: 20px;
border-radius: 50%;
border: 5px solid teal;
position: relative;
animation: round 3s;
animation-iteration-count: infinite;
}
@keyframes round {
from {
left: 0px;
}
to {
left: 500px;
}
}
</style>
</head>
<body>
<h1>The animation-iteration-count</h1>
<div class="container">
<div></div>
</div>
</body>
number: Specify a number to determine the exact number of repetitions.
infinite: Use infinite for continuous looping of the animation.
The animation direction
The animation-direction property specifies whether the animation should be run from start to finish, end to start, or normally. The animation direction has different values.
<head>
<style>
.container {
background-color: #f2f2f2;
width: 45%;
height: 200px;
}
.container div {
width: 150px;
height: 150px;
background: teal;
top: 20px;
border-radius: 50%;
border: 5px solid thistle;
position: relative;
animation: round 3s;
animation-direction: alternate-reverse;
}
div p {
color: white;
font-size: 20px;
align-items: center;
text-align: center;
margin-top: 60px;
}
@keyframes round {
from {
left: 0px;
}
to {
left: 500px;
}
}
</style>
</head>
<body>
<h1>The animation-direction</h1>
<div class="container">
<div></div>
</div>
</body>
normal: The animation plays forward from start to end.
reverse: The animation plays backward from end to start.
alternate: The animation plays forward, then backward, and repeats.
alternate-reverse: The animation plays backward, then forward, and repeats.
The animation-fill-mode
Animation-fill-mode specifies how a CSS animation applies styles to the target before and after it completes. It contains four values.
none: The animation does not apply any styles before or after it runs.
forwards: The target retains the computed values of the animation's final keyframe after it finishes.
backwards: The target applies the animation's initial keyframe styles as soon as the animation is applied, even before it starts running.
both: The target applies both forwards and backwards behavior.
<head>
<style>
body {
background-color: whitesmoke;
}
.animation {
width: 150px;
height: 250px;
background: grey;
margin-left: 20px;
animation: round 1s;
animation-fill-mode: backwards;
}
@keyframes round {
0% {
background-color: thistle;
width: 150px;
}
25% {
background-color: teal;
width: 350px;
border: 1px solid black;
}
50% {
background-color: salmon;
width: 550px;
border-radius: 50px;
}
75% {
background-color: steelblue;
width: 750px;
}
100% {
background-color: turquoise;
width: 950px;
}
}
</style>
</head>
<body>
<h1>The animation-fill-mode</h1>
<div class="animation"></div>
</body>
The animation-play-state
The animation-play-state property determines whether an animation should play or pause. It's commonly used in CSS hover effects or JavaScript interactions, allowing animations to start or stop based on user actions.
For example, when you hover over an element, the animation will start, and it will pause as soon as the mouse is removed. Similarly, in JavaScript interactions, you can control the animation state to start or stop it as needed.
<head>
<style>
body {
background-color: whitesmoke;
}
.play-animation {
width: 150px;
height: 250px;
background: grey;
margin-left: 20px;
animation: round 1s forwards;
animation-play-state: paused;
}
.play-animation:hover {
animation-play-state: running;
}
@keyframes round {
0% {
background-color: thistle;
width: 150px;
}
25% {
background-color: teal;
width: 350px;
border: 1px solid black;
}
50% {
background-color: salmon;
width: 550px;
border-radius: 50px;
}
75% {
background-color: steelblue;
width: 750px;
}
100% {
background-color: turquoise;
width: 950px;
}
}
</style>
</head>
<body>
<h1>The animation-play-state</h1>
<div class="play-animation"></div>
</body>
The animation
Animations offer a variety of properties, and you can set them using the animation shorthand property, which allows you to define multiple animation properties at once.
When using the animation property alone, you need to include the following values: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state. These values collectively control the behavior and appearance of the animation.
<head>
<style>
body {
background-color: whitesmoke;
}
.container div {
width: 150px;
height: 150px;
background: teal;
top: 20px;
border-radius: 50%;
border: 5px solid thistle;
position: relative;
animation: round 2s linear 1s infinite alternate forwards running;
}
@keyframes round {
from {
left: 0px;
}
to {
left: 500px;
}
}
</style>
</head>
<body>
<h1 style="font-family:sans-serif;">The animation Property</h1>
<div class="container">
<div></div>
</div>
</body>
By learning CSS animation properties properly, you can give a new look to the website, which can increase user engagement. Practice with all the examples given above and improve your skills in CSS animation.
I hope you completely understand this topic. If you have any questions, you can ask them in the question box given below. Our support team will help you ASAP! Thank you.