CSS Animation - ändern Sie Hintergrundbild nach der Farbänderung

Question

auf meiner Seite ich diesen CSS-Code bekam

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

Jedes Mal, ändert sich die Farbe kann ich es bekommen, um zwischen

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

und

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

Answer 1

Beachten Sie, dass dies in looping bleiben würde ... aber so etwas sollte funktionieren.

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