使用JavaScript将webkit-keyframes设置为/ to参数

@keyframes my-animation {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

const style = document.createElement('style');
style.type = 'text/css';
document.head.appendChild(style);

const sheet = style.sheet;
const rule = `@keyframes my-animation {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}`;
sheet.insertRule(rule, 0);

const element = document.querySelector('#my-element');
element.style.animation = 'my-animation 1s ease-in-out';