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;