Question

使用变换，您可以更改原点，但似乎不存在动画原点属性。有谁知道如何改变动画的起源。例如我有一个css成长动画，其中一个红色的正方形在屏幕上成长，但它从左上角增长，我想从中间增长

@keyframes myFrames{
  0%{
      width: 0px;
      height: 0px;
  }
  100%{
    width: 100px;
    height: 100px;
    background-color: red
  }
}

div{
  animation: myFrames .2s ease-in-out 0s 5 alternate both;
}

Answer 1

您可以使用变换比例属性

来实现

show()

https://jsfiddle.net/b9cezvoz/27/

Answer 2

如果使用变换比例并缩放到100％，设置变换原点是关键。但是，如果使用比例并将初始宽度/高度设置为0，则动画将无法工作（因为0x100为0），因此请确保在缩放时不要在宽度/高度属性上设置初始值0。您可以设置为1px并从那里缩放到100％（并且可选地将可见性设置为隐藏，然后在100处可见 - 但是可能有可变结果，您可能需要更多关键帧）

建议您为有问题的div提供id或类名，并将css值分配给该id而不是div，因为这会影响所有div。

＆＃13;

@keyframes myFrames {
  0% {
    width: 1px;
    height: 1px;
  }
  100% {
    background-color: red;
  }
}

#redsquare {
  margin: 100px auto 0px auto;
  animation: myFrames .2s ease-in-out 0s 5 alternate both;
  transform-origin: 50% 50%;
  transform: scale(100, 100);
}

＆＃13;

<div id="redsquare">
</div>

＆＃13;

如何更改css动画的来源？

2 个答案: