如何在没有动画的情况下突然更改CSS动画中的属性

Question

这是我想要弄清楚的，但没有使用51％关键帧作为实现transform-origin更改的hacky方式。这是Fiddle Demo。

@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

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

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

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

以下是一个示例代码段：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;