CSS to animate polka dot fade

file.css

.polka-dot {
    --dot-spacing: 20px;
    --dot-fade-offset: 0%;
    --dot-color: #fc466b;
    background: paint(polka-dot-fade);
    
    /* other styles as needed... */
}

.polka-dot:hover, .polka-dot:focus {
    animation: pulse 2s ease-out 6 alternate;
    
    /* other styles as needed... */
}

@keyframes pulse {
    from {
        --dot-fade-offset: 0%;
        --dot-color: #fc466b;
    }
    to {
        --dot-fade-offset: 100%;
        --dot-color: #3f5efb;
    }
}