CSS Animations
CSS animations control the movement and appearance of elements on web pages. We can animate HTML elements without using JavaScript.
- @keyframes: The @keyframes rule in CSS is used to specify the animation rule.
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: changeColor 3s infinite;
}
@keyframes changeColor {
from {
background-color: blue;
}
to {
background-color: green;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
- animation-name: It is used to specify the name of the @keyframes describing the animation.
<html>
<head>
<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>
</head>
<body>
<div class="box"></div>
</body>
</html>
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.
<html>
<head>
<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>
</head>
<body>
<div class="box"></div>
</body>
</html>
- animation-delay: It specifies the delay of the start of an animation.
<html>
<head>
<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>
</head>
<body>
<div class="box"></div>
</body>
</html>
- animation-iteration-count: This specifies the number of times the animation will be repeated.
<html>
<head>
<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>
</head>
<body>
<div class="box"></div>
</body>
</html>
- animation-direction: It defines the direction of the animation. animation direction can be normal, reverse, alternate, and alternate-reverse.
<html>
<head>
<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>
</head>
<body>
<div class="box"></div>
</body>
</html>
- animation-fill-mode: It defines how styles are applied before and after animation. The animation fill mode can be none, forwards, backwards, or both.
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: move 3s forwards;
}
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
- animation-play-state: This property specifies whether the animation is running or paused.
<html>
<head>
<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>
</head>
<body>
<div class="box"></div>
</body>
</html>