What are some cool examples of CSS animations?

What are some cool examples of CSS animations?

There are many amazing CSS animations! For instance, you can create a bouncing ball effect, a fading in/out text, or a rotating loader. Would you like to see code examples for any of these?

Yes, please show me the code for the bouncing ball effect.

Sure! Here's a simple example:

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

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

You can apply this class to a div to see the effect!

That looks great! Can you explain how the keyframes work?

Absolutely! Keyframes define the styles at various points in the animation. In this case, we specify the ball's position at 0%, 40%, 60%, 80%, and 100% of the animation duration. The browser interpolates the values in between to create a smooth bouncing effect.

Thanks! What other animations can I create with CSS?

You can create hover effects, transitions, sliding menus, and even complex animations like a spinning wheel or a fading gallery. Let me know if you want examples for any specific type!