body {
background: var(--main-color);
transition: background 200ms ease;
&.page-body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
}
}
When the body is added the page-body class, then the background should transition from the static color of var(--main-color) to the gradient animation defined in the page-body class.
But it doesn't work. How to get it to work?
