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

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spinner:hover {
    animation: spin 2s infinite linear;
}

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

const box = document.querySelector('.spinner-js');

box.addEventListener('mouseover', function() {
    this.style.animation = 'spin-js 2s infinite linear';
});
box.addEventListener('mouseout', function() {
    this.style.animation = null;
});