how to make an svg colour change with time - html

Question

I have this SVG path line down below that has two circles moving with a specific duration of time from one end to another. Is is possible to change the colour of the blue circle so it would be blue in the start, after 20s, it would start going white, then it would go to orange(from white)when it has 20 more seconds to go to reach the end, while the red circle would change its own colour depending on the colour of the circle and then adding a glow behind the current blue moving circle that would be the color of the current blue circle?
Does this mean the whole has to be made with javascript or how do I have to amend the HTML so it would function such way as described?
<svg width="450" height="450">
<path id="motionPath2"
d="M 50 200 L 400 200 "
stroke="
none" fill="transparent" />
<circle class="circle" r=20 fill=#ff0000 z-index=55>
<animateMotion dur="100s" repeatCount="indefinite"
rotate="auto">
<mpath href="#motionPath2" />
</animateMotion>
</circle>
<path id="motionPath"
d="M 50 200 L 400 200 "
stroke="
black" fill="transparent" />
<circle class="circle" r=5 fill=#45b6fe z-index=55>
<animateMotion dur="100s" repeatCount="indefinite"
rotate="auto">
<mpath href="#motionPath" />
</animateMotion>
</circle>
</svg>

Answer 1

You can introduce CSS animation where you can easily handle the coloration.
Here is a basic example to illustrate the idea:
#keyframes color {
from {
fill: red;
}
to {
fill: green;
}
}
#big {
animation: color 20s linear infinite;
}
<svg width="450" height="450">
<path id="motionPath2"
d="M 50 200 L 400 200 "
stroke="
none" fill="transparent" />
<circle class="circle" id="big" r=20 fill=#ff0000 z-index=55>
<animateMotion dur="20s" repeatCount="indefinite"
rotate="auto">
<mpath href="#motionPath2" />
</animateMotion>
</circle>
<path id="motionPath"
d="M 50 200 L 400 200 "
stroke="
black" fill="transparent" />
<circle class="circle" r=5 fill=#45b6fe z-index=55>
<animateMotion dur="20s" repeatCount="indefinite"
rotate="auto">
<mpath href="#motionPath" />
</animateMotion>
</circle>
</svg>
and since it's about a simple geometry you can easily do this using only CSS without SVG
.box {
margin:100px;
height:2px;
background:green;
position:relative;
}
.box:before,
.box:after{
content:"";
position:absolute;
width:80px;
height:80px;
border-radius:50%;
left:0;
top:0;
transform:translate(-50%,-50%);
background:red;
animation:move 10s linear infinite alternate;
animation-name:move,color,glow;
}
.box:after {
width:20px;
height:20px;
background:blue;
}
#keyframes move {
to {
left:100%;
}
}
#keyframes color {
to {
background:yellow;
}
}
#keyframes glow {
to {
box-shadow:0 0 30px yellow;
}
}
<div class="box">
</div>

Answer 2

This is a partial answer to your question because I understand it only in part. I hope after seeing the answer you'll be able to formulate a better question.
Changes I've made:
You are using an animation for every circle but since the path is the same and the animation are identical I've putted both circles in a group and I'm animating the circle.
Also since the path is a line I could have used animateTransform ... type="translate" instead. However you may want to change the path to something more complicated so I'm sticking with animateMotion.
In order to animate the color you can use <animate> to animate the fill, and use the values attribute for the colors: values="red;white;orange"
Since you mention that the last color should apear 20seconds before the animation ends I'm using keyTimes= "0; 0.8; 1". Please note that the keyTimes attribute has the same number of values as the values attribute and represents a list of time values used to control the pacing of the animation.
<svg width="450" height="450">
<path id="motionPath2" d="M 50 200 L 400 200 "
stroke="black" fill="transparent" />
<g>
<circle class="circle" r="20" fill="#ff0000"></circle>
<circle class="circle" r=5 fill="#45b6fe" >
<animate
attributeName="fill"
attributeType="XML"
values="#45b6fe;white;orange"
keyTimes= "0; 0.8; 1"
dur="100s"
repeatCount="indefinite"/>
</circle>
<animateMotion dur="100s" repeatCount="indefinite">
<mpath href="#motionPath2" />
</animateMotion>
</g>
</svg>