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;