如何使用转换透视图正确地设置CSS颜色转换时间？

所以我有一个可爱的小旋转器，用来表示什么东西正在加载。透视变化和背景颜色应该同时变化。我很难让变换和过渡计时对齐，这样你就看不到颜色的变化，当正方形翻转时，它需要已经改变，这样它才是一个平滑的过渡

HTML

---

需要考虑两件事：

过渡在关键帧之间平滑插值（根据缓和函数）

如果未在关键帧处指定属性，则该属性将在该关键帧上进行插值而不会中断

考虑到这些，你可以改变关键帧在你的视角变化中应用你的颜色变化。此外，您将为颜色更改设置两个关键帧，彼此非常接近，以确保插值在一个小的时间片上进行

@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(120px); background-color: #00b16a; }
  24.9% {background-color: #00b16a;}
  25.0% {background-color: #f22613;}
  50% { -webkit-transform: perspective(120px) rotateY(180deg); background-color: #f22613;}
  74.9% { background-color: #f22613; }
  75% { background-color: #aaabae; }
  100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); background-color: #aaabae; }
}

现在，您会注意到，由于动画处于无限重复状态，因此当动画从100%循环到0%时，仍然会得到颜色过渡。您必须指定

动画方向：alternate或调整关键帧，使100%结束于100%和0%之间的一个合理的中间点

因此，如果我要调整它们，是否最好让整个动画在50%之前完成？我不知道“最佳”是什么，但这将是一种方法：0-50%从开始状态到结束状态；从结束到开始状态的50-100%。非常感谢你的回答，你太棒了。
    .spinner {
    width: 20px;
    height: 20px;
    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
    animation: rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(120px); background-color: #00b16a; }
  50% { -webkit-transform: perspective(120px) rotateY(180deg); background-color: #f22613;}
  100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); background-color: #aaabae; }
}
@keyframes rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(120px); background-color: #00b16a; }
  24.9% {background-color: #00b16a;}
  25.0% {background-color: #f22613;}
  50% { -webkit-transform: perspective(120px) rotateY(180deg); background-color: #f22613;}
  74.9% { background-color: #f22613; }
  75% { background-color: #aaabae; }
  100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); background-color: #aaabae; }
}