Animating elements on a web page is a great way to catch a user's eye and make your site more interactive. CSS animations are a growing trend in web design, and they're also fairly easy to create. In this example, we'll show you how to create a pure CSS gradient background animation.
By combining linear-gradient of background property and keyframes, we can easily create an impressive gradient background animation.
To create a pure CSS gradient background animation, we'll create two basic keyframes, plus an extra in the middle. The first keyframe will define the starting point of the animation, with the background color set to the first color in your gradient. The last keyframe will define the ending point of the animation, with the background color set to the last color in your gradient, and in between these two keyframes, we'll add an intermediate step to create a smooth gradient effect.
<div class="gradient"></div>
.gradient {
width: 100%;
height: 350px;
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%;
}
}
