CSS: Weird box shadow transition - css

Question

I have a box shadow that's the same color as the element next to it, and I'm using a CSS transition to fade in both of them. The css transition for box-shadows and background-color is identical so I don't understand why they appear to fade in at a different rate.
Here a jsfiddle to reproduce the issue, and here is the relevant SCSS:
.right-of-blue {
box-shadow: 8px 0 transparent;
}
.outline, .background {
border-color: transparent;
background-color: transparent;
}
// Clicking the button toggles this class on the wrapper div
.colors-enabled {
.should-animate {
transition:
background-color .5s,
box-shadow .5s,
border-color .5s;
}
.outline {
border-width: 1px 2px;
margin: 0 -2px;
background: none !important;
border-style: solid;
}
.background {
border-width: 1px;
margin: 0 -1px;
border-style: solid;
}
.red {
border-color: $red;
background-color: $red;
}
.blue {
border-color: $blue;
background-color: $blue;
}
.right-of-blue {
box-shadow: 8px 0 $blue;
// Bump the outline/background of the next segment over to make room for the box shadow
& + span.outline {
margin-left: 0;
// Bump the text inside back to keep it from moving
& > span > span {
margin-left: -2px;
}
}
}
}

Answer 1

Seems to me that it's not because of different rates. you feel it this way because when the opacity of the blue background is for example 0.25, its 0.25 for the shadow too. so the overlap of two 0.25 in opacity make you feel it 0.5;
I changed your fiddle to avoid the overlap and I removed the border colors which overlap too. you can see the rate dont feel as before.
.right-of-blue {
box-shadow: 0 8px transparent;
}
check here:
https://jsfiddle.net/ahmadm/kxyua0dj/