div {
  width: 100px;
  height: 100px;
  background-color: orange;
  margin: 20px;
}

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

.box {
    animation: slide 2s forwards;
}

.box-js {
    animation: slide 2s forwards;
}

// Add the @keyframes if not present in CSS
let styleSheet = document.styleSheets[0];
let keyframes = `
    @keyframes slide-js {
        from { transform: translateX(0); }
        to { transform: translateX(100px); }
    }
`;
styleSheet.insertRule(keyframes, styleSheet.cssRules.length);

const box = document.querySelector('.box-js');
box.style.animation = 'slide-js 2s forwards';