Animation in CSS

 Animation in CSS

CSS animations allow you to create animated effects on elements. To create an animation, you need to define the animation using the @keyframes rule and then apply the animation to an element using the animation property. Here's an example:

css

@keyframes slide-in {

  0% {

    transform: translateX(-100%);

  }

  100% {

    transform: translateX(0);

  }

}

.box {

  animation: slide-in 1s ease-in-out;

}

This will create an animation that slides the .box element in from the left over a period of 1 second, using an ease-in-out timing function.