I got a question please I want to create a CSS looping gradient animation but when I do it the animation is very static it's not animating smoothly below is an example what I'm currently working on. Hope you can help me please.
.slider1 {
background: background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(109, 0, 255)) !important;
}
/* css animation not smooth */
.slider1 {
opacity: .5;
animation: myfirst 5s;
-moz-animation: myfirst 5s infinite; /* Firefox */
-webkit-animation: myfirst 5s infinite; /* Safari and Chrome */
}
@-moz-keyframes myfirst { /* Firefox */
0% {
background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(0, 174, 255))
}
50% {
background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(135, 255, 0))
}
100% {
background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(109, 0, 255))
}
}
@-webkit-keyframes myfirst { /* Safari and Chrome */
0% {
background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(0, 174, 255))
}
50% {
background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(135, 255, 0))
}
100% {
background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(109, 0, 255))
}
}<div class="slider1">
This some content
<div class="wsite-spacer" style="height:600px;"></div>
</div>