What are some examples of CSS animations I can use?

What are some examples of CSS animations I can use in my web projects?

There are many CSS animations you can use! For example, you can create a fade-in effect, a bouncing ball, or a sliding menu.

Can you show me how to create a fade-in effect?

Sure! You can use the @keyframes rule to define the fade-in effect. Here's a simple example:

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Just apply the fade-in class to your element!

What about a bouncing ball animation?

For a bouncing ball, you can use the following CSS:

.bounce {
  animation: bounce 1s infinite;
}

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

This will create a nice bouncing effect!

Can I combine multiple animations on one element?

Absolutely! You can combine multiple animations by separating them with commas in the animation property. For example:

.combined {
  animation: fadeIn 2s, bounce 1s infinite;
}