SVG CSS keyframe animation help: Fade between 3 screens infinitely - svg

Question

I'd like to do a simple CSS keyframe animation in an SVG, an infinitely repeating 15-second slideshow-like presentation of three screens (let's call them #red, #yellow, #blue), each displaying for 5 seconds with roughly a 1-second fade between each. I can't quite figure out the technique/timing for this using keyframes and opacity, and I'm not finding anything this simple in reference websites or blog posts. Thank you for any and all help!
Figured it out:
#red{
animation: red-animate 20s ease infinite;
}
#yellow{
animation: yellow-animate 20s ease infinite;
}
#blue{
animation: blue-animate 20s ease infinite;
}
#keyframes red-animate {
0% {opacity: 1;}
28% {opacity: 1;}
33% {opacity: 0;}
94% {opacity: 0;}
100% {opacity: 1;}
}
#keyframes yellow-animate {
0% {opacity: 0;}
28% {opacity: 0;}
33% {opacity: 1;}
61% {opacity: 1;}
66% {opacity: 0;}
100% {opacity: 0}
}
#keyframes blue-animate {
0% {opacity: 0;}
61% {opacity: 0;}
66% {opacity: 1;}
94% {opacity: 1;}
100% {opacity: 0}
}

Answer 1

I would keep it simple, and do everything inside a single keyframe animation.
If I am using a framework like Angular, with a stateful animation, I could have three animations in sequence, however, in pure CSS I would use just one (especially to animate a single SVG since it's what you need).
A simple example, without opacity in between those steps and animating fill color (made it 5 seconds long instead of 60 seconds to avoid wasting people's time):
.rect {
fill: red;
animation: animate-color-and-opacity 5s ease infinite;
}
#keyframes animate-color-and-opacity {
0% {fill: red;}
33% {fill: blue;}
66% {fill: green;}
}
<svg width="400" height="110">
<rect class="rect" width="300" height="100" />
</svg>
If you need the fade effect in between (15 seconds long animation, this time):
.rect {
fill: red;
animation: animate-color-and-opacity 15s ease infinite;
}
#keyframes animate-color-and-opacity {
0% {fill: red; opacity: 1}
19% {opacity: 1}
29% {opacity: 0}
33% {fill: blue; opacity: 1}
52% {opacity: 1}
62% {opacity: 0}
66% {fill: green; opacity: 1}
86% {opacity: 1}
96% {opacity: 0}
}
<svg width="400" height="110">
<rect class="rect" width="300" height="100" />
</svg>
If you don't want the fill transition in between, you could use step-end:
.rect {
fill: red;
animation: animate-color-and-opacity 10s infinite step-end;
// or animation-timing-function: step-end;
}
#keyframes animate-color-and-opacity {
0% {fill: red; opacity: 1}
19% {opacity: 1}
29% {opacity: 0}
33% {fill: blue; opacity: 1}
52% {opacity: 1}
62% {opacity: 0}
66% {fill: green; opacity: 1}
86% {opacity: 1}
96% {opacity: 0}
}
<svg width="400" height="110">
<rect class="rect" width="300" height="100" />
</svg>