How do I add the red/green fade to effect on position changes in the Timing Tower

.overlay>.standings>.driver-wrapper.position-gained>.driver>.container::before {  
opacity: 1;
 transition: opacity 0.1s;
} 

.overlay>.standings>.driver-wrapper.position-lost>.driver>.container::after {  
opacity: 1; 
transition: opacity 0.1s;  
} 

.overlay>.standings>.driver-wrapper>.driver>.container::before {
position: absolute;  
content: "";  
top: 0;  
right: 0;  
bottom: 0;  
left: 0;  
opacity: 0;  
background: linear-gradient(to left, green, transparent); 
transition: opacity 0.1s ease 2s;  
} 

.overlay>.standings>.driver-wrapper>.driver>.container::after {
position: absolute;  
content: "";  
top: 0;  
right: 0;  
bottom: 0;  
left: 0;  
opacity: 0;  
background: linear-gradient(to left, darkred, transparent); 
transition: opacity 0.1s ease 2s;  
} 

.overlay>.standings>.driver-wrapper>.driver>.container>.name-wrapper, .overlay>.standings>.driver-wrapper>.driver>.container>.data-wrapper, .overlay>.standings>.driver-wrapper>.driver>.container>.last-lap-time-wrapper,  .overlay>.standings>.driver-wrapper>.driver>.container>.flag-wrapper-7x5, .overlay>.standings>.driver-wrapper>.driver>.container>.pit-wrapper {
position: relative; 
z-index: 2;
}