#extend class animations cancel each other out - css

Question

I'm trying to create a loading animation where the outer ring spins to the right, while the inner one spins to the left.
This is all the CSS code:
html {
height: 100%;
}
.loadingCircle {
width: 100px;
height: 100px;
border: solid 5px transparent;
border-top: solid 5px blue;
border-radius: 50%;
transform-origin: center center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.loadingCircleOuter {
#extend .loadingCircle;
animation: circleSpinOuter 2s linear infinite;
}
.loadingCircleInner {
#extend .loadingCircle;
height: 80px;
width: 80px;
animation: circleSpinInner 2s linear infinite;
}
#keyframes circleSpinOuter {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(360deg);
}
}
#keyframes circleSpinInner {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}
Doing this results in the inner circle not spinning at all.
If I comment out the animation of the outer circle the inner one spins properly and making the inner circle spin twice as fast is enough to cancel the out the spin of the outer animation and add the proper spin to the left to it (oddly enough, only to it and not to the outer one, that one is still spinning correctly to the right).
It's clear that the outer animation is applied to both circles, but why?
I don't understand why it's behaving like that, changing the color of the outer circle does not apply the change to both circles, why does it alter the animation for both though?
Am I doing something horribly wrong?