What are some cool CSS and JS animations I can use on my website?

What are some cool CSS and JS animations I can use on my website?

There are many exciting animations you can implement! For CSS, consider using transitions for hover effects, keyframes for complex animations, and animations for loading indicators. For JavaScript, libraries like GSAP or Anime.js can create stunning effects.

Can you give me an example of a CSS keyframe animation?

Sure! Here's a simple example of a bouncing ball animation using CSS keyframes:

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.ball {
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
  animation: bounce 2s infinite;
}

That looks great! How about a JavaScript animation example?

Absolutely! Here's a simple example using GSAP to animate a box:

gsap.to('.box', { duration: 2, x: 100, rotation: 360 });

This will move the box 100 pixels to the right and rotate it 360 degrees over 2 seconds.

Thanks! Where can I learn more about these animations?

You can check out resources like CSS-Tricks, MDN Web Docs, or the official GSAP documentation for in-depth tutorials and examples.