CSS动画 - 更改颜色后更改背景图像

Question

在我的网站上我得到了这个css代码

@-webkit-keyframes colours {
 0% {color: red; color: lime; color: red;}
 25% {color: lime;}
 50% {color: red;}
 75% {color: lime;}
 100% {color: red;}
}
-webkit-animation: colours 1.5s infinite alternate !important;

每次颜色变化都可以让它在

之间切换

background-image: url("/images/redshield.png");

和

background-image: url("/images/greenshield.png"); ?

Answer 1

请注意，这会保持循环...但是这样的事情应该有效。

@-webkit-keyframes colours {
    0% {
        color: red;
        background-image: url("/images/redshield.png");
    }
    25% {color: lime;}
    50%  {
        color: red;
        background-image: url("/images/greenshield.png");
    }
    75% {color: lime;}
    100% {color: red;}
}

-webkit-animation: colours 1.5s infinite alternate !important;