How can I create smooth CSS animations for my website?

How can I create smooth CSS animations for my website?

You can create smooth CSS animations using the @keyframes rule and the animation property. Would you like a simple example?

Yes, please provide an example!

Sure! Here's a basic example:

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation: slide 2s ease-in-out;
}

This will move a box 100 pixels to the right over 2 seconds.

How do I control the duration and timing of the animation?

You can control the duration by changing the value in the animation property, like animation: slide 3s;. The timing function can be adjusted using ease, linear, ease-in, etc.