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

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.blinker:hover {
    animation: blink 1s infinite;
}

// Add the @keyframes if not present in CSS
let styleSheet = document.styleSheets[0];
let blink = `
    @keyframes blink-js {
        0%, 100% { opacity: 1; }
        50% { opacity: 0; }
    }
`;
styleSheet.insertRule(blink, styleSheet.cssRules.length);

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

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