Question

所以我有这个可爱的小旋转器，用于表示什么东西装载。透视变化和背景颜色应该同时改变。我无法将“变换”和“过渡”时间排成一行，以便您不会看到颜色变化，当方形翻转时它需要已经更改，以便平滑过渡。

HTML

<div class="spinner"></div>

CSS

    .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);
  }
}

Answer 1

需要考虑两件事：

过渡在关键帧之间平滑插入（好吧，根据缓动功能）。
如果您未在关键帧上指定属性，则会在不中断该关键帧的情况下进行插值。

考虑到这些，您可以更改关键帧以在透视变化的中间应用颜色变化。此外，您将为颜色变化设置两个关键帧，彼此非常接近，以确保插值在很短的时间片内发生。

@-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％时，您仍会获得颜色转换。您必须指定animation-direction: alternate;或调整关键帧，以便100％在100％和0％之间的合理补间点结束。

<强> DEMO using alternate

如何使用transform透视正确制作CSS颜色过渡时间？

1 个答案: