Certainly! The animation property in CSS is used to apply animations to elements on a webpage. Here is a basic example of how to use it:
.element {
animation-name: slide-in;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes slide-in {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
In the above example, we define an animation called slide-in using the @keyframes rule. We then apply this animation to the .element class using the animation-name property. The animation-duration property specifies how long the animation should take, the animation-delay property adds a delay before the animation starts, the animation-iteration-count property specifies how many times the animation should repeat, and the animation-direction property specifies the direction of the animation.
Within the @keyframes rule, we define the different stages of the animation using percentage values. In this example, we start with the element translated to the left by 100% (transform: translateX(-100%)) and end with the element at its original position (transform: translateX(0)).
You can customize the animation by adjusting these properties and the @keyframes rule to achieve different effects.