Mastering CSS Animations: From Basics to Advanced Effects

What to do:

1. Add a transition to a button hover state:
   css

   .btn {
      background: #3498db;
      color: #fff;
      transition: background 0.3s ease, transform 0.2s;
   }
   .btn:hover {
      background: #217dbb;
      transform: scale(1.05);
   }

Example:

Hovering the button smoothly changes its color and size.

What to do:

1. Define a bounce animation:
   css

   @keyframes bounce {
      0%, 100% {
         transform: translateY(0);
      }
      50% {
         transform: translateY(-30px);
      }
   }
   .bounce {
      animation: bounce 1s infinite;
   }

Example:

Apply bounce to an element to make it jump repeatedly.

What to do:

1. Add or remove animation classes on events:
   javascript

   const box = document.querySelector('.box');
   document.querySelector('button').addEventListener('click', () => {
      box.classList.toggle('bounce');
   });

Example:

Clicking the button toggles the bounce animation on the box.

What to do:

1. Animate SVG stroke with CSS:
   css

   svg path {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: draw 2s forwards;
   }
   @keyframes draw {
      to { stroke-dashoffset: 0; }
   }

Example:

The SVG path appears to be drawn from start to finish.

What to do:

1. Add Animate.css to your project:
   html

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

2. Use a class from Animate.css:
   html

   <div class="animate__animated animate__fadeIn">Hello!</div>

Example:

Elements fade in with a single class name.

What to do:

1. Use will-change for smoother animations:
   css

   .moving {
      will-change: transform, opacity;
   }

2. Respect user preferences for reduced motion:
   css

   @media (prefers-reduced-motion: reduce) {
      * {
         animation: none !important;
         transition: none !important;
      }
   }

Example:

Animations are disabled for users who prefer reduced motion.