如何在不设置动画的情况下突然更改 CSS 动画中的属性

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

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

正如我在评论中提到的，有仅用一个动画无法实现此目的。我不会将你原来的方法称为hacky因为突然的变化意味着在前一个关键帧之后立即添加一个新的关键帧（50％和51％），但我有点明白你的意思。

一种可能的替代方案是使用两个动画- 一个用于变换，另一个用于变换原点更改。这里我们可以让第二个动画（变换原点变化）单独有一个steps (or step-end）定时功能，使这种变化单独突然发生。

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