Output MySQL query results in CSV format?

CSS animation isn't working. Animation-name not recognized

Robinson

The general idea is to rotate the linear gradient background of a div 360 degrees over the course of two seconds. Simple enough. The trouble is, the animation-name here is apparently not recognized. The color of the text does not change in my IDE, so I assume that's the case. Can someone tell me what could be going wrong here? My code is below:

.border {
    position: absolute;
    transform: translate(5vw, 10vh);
    display: flex;
    height: 77vh;
    width: 77vh;
    background: linear-gradient(90deg, rgba(183, 35, 35, 1), rgba(51, 169, 236, 1));
    border: 1px solid transparent;
    border-radius: 500px;
    padding: 1vh;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    animation-name: spin;
    animation-duration: 2s;
}

@keyframes spin {
    0% { background: linear-gradient(90deg, rgba(183, 35, 35, 1), rgba(51, 169, 236, 1)); }
    25% { background: linear-gradient(180deg, rgba(183, 35, 35, 1), rgba(51, 169, 236, 1)); }
    50% { background: linear-gradient(270deg, rgba(183, 35, 35, 1), rgba(51, 169, 236, 1)); }
    75% { background: linear-gradient(360deg, rgba(183, 35, 35, 1), rgba(51, 169, 236, 1)); }
    100% { background: linear-gradient(90deg, rgba(183, 35, 35, 1), rgba(51, 169, 236, 1)); }
}