如何解决如何循环播放Keyframe CSS彩色动画?
我希望CSS动画每秒循环一次背景色,但我不知道如何使其循环吗?我只想知道如果没有javascript,是否有可能。如果不是,那没关系。
body {
background-repeat: no-repeat;
background-size: cover;
font-family: 'Roboto',sans-serif !important;
position: relative;
animation-name: color;
animation-duration: 6s;
}
@keyframes color {
0% {background-color: white;}
20% {background-color: green;}
40% {background-color: aqua;}
60% {background-color: red;}
80% {background-color: yellow;}
100% {background-color: purple;}
}
解决方法
body {
background-repeat: no-repeat;
background-size: cover;
font-family: 'Roboto',sans-serif !important;
position: relative;
animation-name: color;
animation-duration: 6s;
animation-iteration-count:infinite; /* add this line */
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。