CSS transitions and animations allow you to change the values of CSS properties over a period of time, creating smooth, visually appealing transitions between different styles. You can integrate CSS transitions and animations with JavaScript by using the transition and animation events, which are fired at different points during the transition or animation.

To use CSS transitions with JavaScript, you can listen for the transitionend event, which is fired when a CSS transition has completed. The event object that is passed to the event handler contains a propertyName property, which indicates the CSS property that was transitioned.

Here’s an example of how you might use the transitionend event to log a message when a CSS transition has completed:

element.addEventListener('transitionend', function(event) {
  console.log(`Transition complete for property: ${event.propertyName}`);
});

To use CSS animations with JavaScript, you can listen for the animationstart, animationiteration, and animationend events, which are fired at the beginning, end, and during each iteration of a CSS animation, respectively. The event object that is passed to the event handler contains an animationName property, which indicates the name of the CSS animation that is being played.

Here’s an example of how you might use the animationend event to log a message when a CSS animation has completed:

element.addEventListener('animationend', function(event) {
  console.log(`Animation complete for animation: ${event.animationName}`);
});

You can also use the style property of an element to directly manipulate the CSS properties that are being animated. For example, you might use the style.opacity property to change the opacity of an element during an animation.

element.style.opacity = 0.5;

Keep in mind that you should always use CSS transitions and animations to the extent possible, as they are more efficient and allow you to separate the visual presentation of your web page from the underlying logic. Use JavaScript only when you need to create more complex or customized transitions and animations.