How do you create CSS animations (keyframes)

Creating CSS animations using keyframes allows you to create smooth transitions and effects for various elements on your web page. The @keyframes rule defines the style changes at various points during the animation sequence.

Here’s an example of how to create a simple fade-in animation using keyframes:


        @keyframes fadeIn {
          0% {
            opacity: 0;
          }
          100% {
            opacity: 1;
          }
        }

        .fade-in {
          animation: fadeIn 2s ease-in forwards;
        }