我正在尝试使用@keyframes为背景交换设置动画。背景是径向渐变。背景发生变化,但没有动画。
LONG_PRESS_MILLIS
#mydiv {
background: radial-gradient(circle at 90% 80%, #ff0000, #4d0019);
width: 100%;
height: 1246px;
position: relative;
overflow: hidden;
animation: background-gradient 5s;
animation-iteration-count: infinite;
backface-visibility: hidden;
animation-timing-function: ease-in-out;
}
@-webkit-keyframes background-gradient {
0% {background: radial-gradient(circle at 90% 80%, #ff0000, #4d0019);}
25% {background: radial-gradient(circle at 90% 80%, #993399, #4d0019);}
50% {background: radial-gradient(circle at 90% 80%, #3333cc, #4d0019);}
75% {background: radial-gradient(circle at 90% 80%, #00ffcc, #4d0019);}
100% {background: radial-gradient(circle at 90% 80%, #cc9900, #4d0019);}
}
@keyframes background-gradient {
0% {background: radial-gradient(circle at 90% 80%, #ff0000, #4d0019);}
25% {background: radial-gradient(circle at 90% 80%, #993399, #4d0019);}
50% {background: radial-gradient(circle at 90% 80%, #3333cc, #4d0019);}
75% {background: radial-gradient(circle at 90% 80%, #00ffcc, #4d0019);}
100% {background: radial-gradient(circle at 90% 80%, #cc9900, #4d0019);}
}
我尝试使用纯色并且效果很好(例如,背景:红色,背景:黄色...)。
我尝试了背景图片,而不是仅在渐变上使用背景图片,这无济于事。
您是否有任何建议或知道解决方案如何对交换动画进行动画处理,因此,这不仅是快速交换颜色,而且是一种颜色到另一种颜色的逐渐交换。
答案 0 :(得分:1)
不幸的是,背景渐变无法设置动画
幸运的是,由于外部颜色是恒定的,因此您当前的设计不需要设置渐变动画。
只需使渐变透明,并在下面设置稳定的变化颜色
#mydiv {
width: 100%;
height: 600px;
position: relative;
overflow: hidden;
animation: background-gradient 5s;
animation-iteration-count: infinite;
backface-visibility: hidden;
animation-timing-function: ease-in-out;
background-image: radial-gradient(circle at 90% 80%, transparent, #4d0019);
}
@keyframes background-gradient {
0% {
background-color: #ff0000;
}
25% {
background-color: yellow;
}
50% {
background-color: #3333cc;
}
75% {
background-color: #00ffcc;
}
100% {
background-color: #cc9900;
}
}
<div id="mydiv"></div>
答案 1 :(得分:-1)
您犯了一个小错误。
此:
animation: "background-gradient" 50s;
应该是:
animation: background-gradient 50s;
这是一个片段:
#mydiv {
background: radial-gradient(circle at 90% 80%, #ff0000, #4d0019);
width: 100%;
height: 1246px;
position: relative;
overflow: hidden;
animation: background-gradient 50s;
animation-iteration-count: infinite;
backface-visibility: hidden;
animation-timing-function: ease-in-out;
}
@-webkit-keyframes background-gradient {
0% {background: radial-gradient(circle at 90% 80%, #ff0000, #4d0019);}
25% {background: radial-gradient(circle at 90% 80%, #993399, #4d0019);}
50% {background: radial-gradient(circle at 90% 80%, #3333cc, #4d0019);}
75% {background: radial-gradient(circle at 90% 80%, #00ffcc, #4d0019);}
100% {background: radial-gradient(circle at 90% 80%, #cc9900, #4d0019);}
}
@keyframes background-gradient {
0% {background: radial-gradient(circle at 90% 80%, #ff0000, #4d0019);}
25% {background: radial-gradient(circle at 90% 80%, #993399, #4d0019);}
50% {background: radial-gradient(circle at 90% 80%, #3333cc, #4d0019);}
75% {background: radial-gradient(circle at 90% 80%, #00ffcc, #4d0019);}
100% {background: radial-gradient(circle at 90% 80%, #cc9900, #4d0019);}
}
<div id="mydiv">