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

在我的网站上，我得到了这个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");

及

---

请注意，这将继续循环。。。但像这样的事情应该行得通

@-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;

@-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;