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.