如何在不进行动画处理的情况下突然更改 CSS 动画中的属性

Question

这是我试图弄清楚的，但没有使用 51% 的关键帧作为实现transform-origin更改的黑客方法。这是一个小提琴演示。

@keyframes spin {
  0% { 
    transform-origin: 50% 0; 
    transform: perspective(800px) rotateX(0deg) translateZ(0px); 
  }
  50% { 
    transform-origin: 50% 0; 
    transform: perspective(800px) rotateX(360deg) translateZ(0px); 
  } 
  51% { 
    transform-origin: 50% 100%; /* hacky way to instantly change transform-origin */ 
  }
  100% {
    transform-origin: 50% 100%; 
    transform: perspective(800px) rotateX(0deg) translateZ(0px); 
  } 
} 

Answer 1

正如我在评论中提到的，仅通过单个动画无法实现这一目标。我不会称您原始方法为黑客，因为突然的变化意味着在前一个关键帧（50% 和 51%）之后立即添加新的关键帧，但我有点明白你的意思。

一种可能的替代方法是使用两个动画 - 一个用于转换，另一个用于转换原点更改。在这里，我们可以使第二个动画（变换原点更改）单独具有steps（或step-end）计时函数，以便单独发生此更改。

（注意：我提供此选项只是为了回答您的问题。我仍然更喜欢早期的方法，并避免使用两个不同的关键帧规则来执行相同的动画。

下面是一个示例片段：

.image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  animation: spin 4s linear infinite, origin 4s step-end infinite;
  transform-origin: 50% 0;
}
@keyframes spin {
  0% {
    transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }
  50% {
    transform: perspective(800px) rotateX(360deg) translateZ(0px);
  }
  100% {
    transform: perspective(800px) rotateX(0deg) translateZ(0px);
  }
}
@keyframes origin {
  50% {
    transform-origin: 50% 100%;
  }
}

<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">