CSS animations are a great way to add visual effects to web pages. They allow developers to create dynamic and engaging user interfaces that can capture the attention of visitors. One of the key features of CSS animations is the animation-fill-mode property. In this article, we will explore what animation-fill-mode is and how it can be used to enhance CSS animations.
The animation-fill-mode property is used to specify how an element should be styled before and after an animation is played. It determines whether the styles applied to an element during an animation should be retained or reset once the animation is complete. The property can take four values:
The default value of animation-fill-mode is "none".
Let's take a look at some examples of how animation-fill-mode can be used in CSS animations.
In this example, we will create a simple animation that changes the background color of a div element. We will set the animation-fill-mode property to "forwards" so that the div retains the final background color after the animation is complete.
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
animation-name: color-change;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes color-change {
from {
background-color: red;
}
to {
background-color: blue;
}
}
</style>
<div class="box"></div>
In this example, the div element starts with a red background color. When the animation is played, the background color changes to blue over a period of 2 seconds. Once the animation is complete, the div retains the blue background color because we set the animation-fill-mode property to "forwards".
In this example, we will create an animation that moves a div element from left to right. We will set the animation-fill-mode property to "backwards" so that the div is positioned at the starting point of the animation before the animation is played.
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: move-right;
animation-duration: 2s;
animation-fill-mode: backwards;
}
@keyframes move-right {
from {
left: 0;
}
to {
left: 200px;
}
}
</style>
<div class="box"></div>
In this example, the div element starts at the left edge of the screen. When the animation is played, the div moves to the right by 200 pixels over a period of 2 seconds. Before the animation is played, the div is positioned at the left edge of the screen because we set the animation-fill-mode property to "backwards".
In this example, we will create an animation that rotates a div element by 360 degrees. We will set the animation-fill-mode property to "both" so that the div is rotated to its starting position before the animation is played, and retains its final rotation after the animation is complete.
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: rotate;
animation-duration: 2s;
animation-fill-mode: both;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
<div class="box"></div>
In this example, the div element starts with no rotation. When the animation is played, the div rotates by 360 degrees over a period of 2 seconds. Before the animation is played, the div is rotated to its starting position because we set the animation-fill-mode property to "both". After the animation is complete, the div retains its final rotation of 360 degrees because we set the animation-fill-mode property to "both".
The animation-fill-mode property is a powerful tool for controlling the behavior of CSS animations. By setting the property to "forwards", "backwards", or "both", developers can create animations that retain or reset the styles applied to an element during an animation. This can be used to create dynamic and engaging user interfaces that capture the attention of visitors.