how can i create a css animation in javascript?

// start frame
const start = {
  opacity: 0
};

// end frame
const end = {
  opacity: 1
};

const element = document.querySelector('span');
Object.assign(element.style, start);
element.style.transition = 'all 5s linear';

requestAnimationFrame(() => {
  Object.assign(element.style, end);
});

<span>Lorem Ipsum</span>