Why are my shapes flat after I added animation - html

Question

I have a 3D triangle with a base color for every shape, but I want the base (aka the square) to have an animated color, but after adding the animation, the triangles all lay flat all of the sudden. When I remove the animation, the shapes readjust as they should.
For the animation I hue-rotate the linear-gradient color of the square in #keframes animate.
Here is the html code:
<div class="wrapper">
<div class="pyramid">
<div class="square">
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
</div>
</div>
</div>
And CSS:
#-webkit-keyframes animate {
0%, 100% {
filter: hue-rotate(0deg);
}
50% {
filter: hue-rotate(360deg);
}
}
#keyframes animate {
0%, 100% {
filter: hue-rotate(0deg);
}
50% {
filter: hue-rotate(360deg);
}
}
#-webkit-keyframes rotate {
from {
transform: rotateX(120deg) rotateZ(0deg);
}
50% {
transform: rotateX(120deg) rotateZ(180deg);
}
to {
transform: rotateX(120deg) rotateZ(360deg);
}
}
#keyframes rotate {
from {
transform: rotateX(120deg) rotateZ(0deg);
}
50% {
transform: rotateX(120deg) rotateZ(180deg);
}
to {
transform: rotateX(120deg) rotateZ(360deg);
}
}
.wrapper {
position: relative;
display: flex;
justify-content: center;
align-items: center;
top: 500px;
left: 50%;
margin-bottom: 0;
transform-style: preserve-3d;
width: 3.75rem;
height: 3.75rem;
transform-origin: 1.875rem 1.875rem;
transform: rotateX(120deg) rotateZ(45deg);
-webkit-animation: rotate 4s linear infinite;
animation: rotate 4s linear infinite;
}
.pyramid {
position: absolute;
perspective: 500px;
transform-style: preserve-3d;
}
.square {
width: 3.75rem;
height: 3.75rem;
transform-style: preserve-3d;
background: linear-gradient(to left, #008aff, #00ffe7);
-webkit-animation: animate 5s linear infinite;
animation: animate 5s linear infinite;
}
.triangle {
position: absolute;
width: 5rem;
height: 5rem;
}
.triangle:nth-child(1) {
width: 3.75rem;
top: -33%;
background: #f1ecfb;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
transform-origin: 50% 100%;
transform: rotateX(-68deg);
}
.triangle:nth-child(2) {
width: 3.75rem;
background: #f1ecfb;
-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
clip-path: polygon(50% 100%, 0 0, 100% 0);
transform-origin: 50% 0%;
transform: rotateX(68deg);
}
.triangle:nth-child(3) {
height: 3.75rem;
left: -33%;
background: white;
transform-origin: 100% 50%;
-webkit-clip-path: polygon(100% 100%, 0 50%, 100% 0);
clip-path: polygon(100% 100%, 0 50%, 100% 0);
transform: rotateY(68deg);
}
.triangle:nth-child(4) {
height: 3.75rem;
background: white;
transform-origin: 0% 50%;
-webkit-clip-path: polygon(0 100%, 100% 50%, 0 0);
clip-path: polygon(0 100%, 100% 50%, 0 0);
transform: rotateY(-68deg);
}

Answer 1

I changed it so that the animation changes the background color which resolves the issue.
#-webkit-keyframes animate {
0%, 100%{
background: #ffadad;
}
12.5%{
background: #ffd6a5;
}
25%{
background: #fdffb6;
}
37.5%{
background: #caffbf;
}
50%{
background: #9bf6ff;
}
62.5%{
background: #a0c4ff;
}
75%{
background: #bdb2ff;
}
87.5%{
background: #ffc6ff;
}
}
#keyframes animate {
0%, 100%{
background: #ffadad;
}
12.5%{
background: #ffd6a5;
}
25%{
background: #fdffb6;
}
37.5%{
background: #caffbf;
}
50%{
background: #9bf6ff;
}
62.5%{
background: #a0c4ff;
}
75%{
background: #bdb2ff;
}
87.5%{
background: #ffc6ff;
}
}