Card color border animation

card-border-animation.css

.card {
    position: relative;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    margin: 20px;
}
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    transform: translate(-4px, -4px);
    background: linear-gradient(60deg, #5beb8b, #648bf5, #a964f3, #f25fd0, #f7736a, #fdcf52) 0 50%;
    background-size: 300% 300%;
    animation: gradient 10s ease-in-out infinite;
    border-radius:  8px;
    z-index: -1;
}
@keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}