且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

CSS3动画 - 平滑无限循环

更新时间:2022-10-15 09:06:38

你只需要以另一种方式修复你的框架:使 (0%)和(100%)的值相同:



div class =snippetdata-lang =jsdata-hide =false>

  html,body {width:100%;高度:100%; margin:0; padding:0;} body {-webkit-animation:pulsate 20s linear infinite; -moz动画:脉动20s线性无限;动画:pulsate 20s linear infinite;} @  -  webkit-keyframes pulsate {0%{background:black} 20%{background:red} 40%{background:blue} 60%{background:orange} 100%{background:black}} @  -  moz-keyframes pulsate {0%{background:black} 20%{background:red} 40%{background:blue} 60%{background:orange} 100%{background:black}} @ keyframes pulsate {0%{background:black} 20%{background:red} 40%{background:blue} 60%{background:orange} background:black}}