我制作了一个小背景动画,其中div随着时间的推移会改变颜色.
它工作顺利,但当它达到100%时,它会直接跳到0%而没有任何转换.
我在google上搜索并尝试了不同的动画制作方式,但是如果动画我一直无法获得流畅的“重启”.
它工作顺利,但当它达到100%时,它会直接跳到0%而没有任何转换.
我在google上搜索并尝试了不同的动画制作方式,但是如果动画我一直无法获得流畅的“重启”.
我错过了什么?
-webkit-animation: pulsate 20s infinite; animation: pulsate 20s infinite; -moz-animation: pulsate 20s infinite; @-webkit-keyframes pulsate { 0% {background: @black} 25% {background: @red} 50% {background: @blue} 75% {background: @orange} 100% {background: @green} } @keyframes pulsate { 0% {background: @black} 25% {background: @red} 50% {background: @blue} 75% {background: @orange} 100% {background: @green} } @-moz-keyframes pulsate { 0% {background: @black} 25% {background: @red} 50% {background: @blue} 75% {background: @orange} 100% {background: @green} }
解决方法
您只需要以另一种方式修复框架:使from(0%)和(100%)值相同:
html,body { width: 100%; height: 100%; margin: 0; padding: 0; } body { -webkit-animation: pulsate 20s linear infinite; -moz-animation: pulsate 20s linear infinite; animation: pulsate 20s linear infinite; } @-webkit-keyframes pulsate { 0% {background: black} 20% {background: red} 40% {background: blue} 60% {background: orange} 80% {background: green} 100% {background: black} } @-moz-keyframes pulsate { 0% {background: black} 20% {background: red} 40% {background: blue} 60% {background: orange} 80% {background: green} 100% {background: black} } @keyframes pulsate { 0% {background: black} 20% {background: red} 40% {background: blue} 60% {background: orange} 80% {background: green} 100% {background: black} }
原文地址:https://www.jb51.cc/css/214135.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。