<div class="bg"></div>
.bg {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-size: 300% 300%;
background-image: linear-gradient(-45deg, yellow 0%, yellow 25%, yellow 51%, #ff357f 100%);
-webkit-animation: AnimateBG 20s ease infinite;
animation: AnimateBG 20s ease infinite;
}
@-webkit-keyframes AnimateBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes AnimateBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.