How can I create CSS animations using JavaScript?

How can I create CSS animations using JavaScript?

You can create CSS animations with JavaScript by manipulating the CSS properties of elements. Would you like a simple example?

Yes, please provide an example!

Sure! You can use the style property in JavaScript. For instance:

const box = document.getElementById('box');
box.style.transition = 'transform 2s';
box.style.transform = 'translateX(100px)';

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

What if I want to add a keyframe animation?

You can define keyframes in CSS and then trigger them with JavaScript. For example:

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

Then in JavaScript, you can add the animation like this:

box.style.animation = 'move 2s';