更新时间:2023-09-27 10:43:52
As this question is tagged as CSS, I would like to contribute a pure CSS solution to this, simply use CSS3 @keyframes
and you can simply add colors to the element you want, can step the animation using %
and also, you can use animation-iteration-count
and set it to infinite
. If you want to iterate it for limited times, just changed the infinite
to whatever value you desire but make sure it's an integer.
.animate {
height: 200px;
width: 400px;
border: 1px solid #000;
-webkit-animation: animate_bg 5s;
animation: animate_bg 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes animate_bg {
0% {background:red;}
50% {background:green;}
100% {background:blue;}
}
@-webkit-keyframes animate_bg {
0% {background:red;}
50% {background:green;}
100% {background:blue;}
}
This is introduced in CSS3 spec, so you can refer this link for browser support.
There are many polyfills available for the browsers which are not supporting CSS3 @keyframes
, so you may need to use this if you are looking to support older browsers, if you don't care about the old one's, than you can use this without any hesitation.