如何在不设置动画的情况下突然更改CSS动画中的属性 [英] How to change a property in a CSS animation abruptly without animating

问题描述

这是我要找出的，但是没有使用51％关键帧作为实现 transform-origin 的更改的不可靠方式。这是小提琴演示。

Here is what I am trying to figure out, but without using the 51% keyframe as a hacky way to implement the change of transform-origin. Here is a 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); 
  } 
} 

推荐答案

As我曾在评论中提到， 没有办法仅凭一个动画来实现这一目标 。我不会将您的原始方法称为 hacky ，因为突然的更改意味着在前一个关键帧之后立即添加了一个新的关键帧（分别为50％和51％），但是我有点明白您的意思了。

As I had mentioned in my comment, there is no way to achieve this with just a single animation. I wouldn't call your original approach as hacky because a sudden change means the addition of a new keyframe immediately after the previous one (50% and 51%) but I kind of get what you mean to say.

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

One possible alternate is to make use of two animations - one for the transform and the other for the transform-origin change. Here we can make the second animation (the transform-origin change) alone have a steps (or step-end) timing function so that this change alone happens abruptly.

（ 注意：我提供此选项只是为了回答您的问题问题。我还是希望采用较早的方法，并避免使用两个不同的关键帧规则来执行相同的动画。）

(Note: I'm providing this option just as an answer to your question. I'd still prefer the earlier approach and avoid having two different keyframe rules to perform the same animation.)

下面是一个示例片段：

.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">

这篇关于如何在不设置动画的情况下突然更改CSS动画中的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！