/* div:hover {
    background-color: red;
    color: black;
    border: 5px solid black;
    transition: 0.5s ease-in-out 0.1s all;
} */



div {
    text-align: center;
    font-size: fit-content;
    color: red;
    background-color: black;
    padding: 20px;
    border: 5px solid red;
    border-radius: 30px;
    width: 200px;
    height: 100px;
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: ease-in;
    animation-direction: alternate;
    animation-delay: 0.2s;
    /* animation-fill-mode: both; */
    animation-iteration-count: infinite;
} 




@keyframes myfirst {
    0% {
        background-color: red;
        color: black;
        border: 5px solid black;
    }
    100% {
        background-color: black;
        color: red;
        border: 5px solid red;
    }
}