.card-transition {
    border: none;
    color: rgb(255, 255, 255);
    border-radius: 8px;
    box-shadow: 2px 5px 10px -2px #000000;
    transition: 0.8s;

    background: linear-gradient(269deg, #283593, #1e88e5);
    background-size: 400% 400%;

    -webkit-animation: AnimationName 10s ease infinite;
    -moz-animation: AnimationName 10s ease infinite;
    animation: AnimationName 10s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 51%}
    100%{background-position:0% 50%}
}

.card-transition:hover {
    box-shadow: 0 10px 14px -7px #000000;
    transform: scale(1.02);
}