变换比例动画从错误的位置开始

Question

我正在学习 CSS 动画，我遇到了 transform: scale(); 的问题。我有一个以 transform: translate(); 为中心的元素像这样：

.gameContainer__deck {
  width: 60%;
  height: 700px;
  z-index: 2;

  display: flex;
  flex-wrap: wrap;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
}

这是我的动画：

@keyframes scale-down {
  0% {
    transform: scale(1);
    transform-origin: top left;
  }
  100% {
    transform: scale(0);
    transform-origin: bottom right;
  }
}

.anScaleDown {
  animation: scale-down 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

动画从top和left属性定义的位置开始，不考虑transform: translate(-50%, -40%);规则。我希望该元素从用 translate 属性定义的位置开始动画。我试图找到解决这个问题的方法，但是我想到的唯一一件事是以不同的方式将它居中，但我不能这样做，因为我需要一个响应的宽度。

Answer 1

@keyframes scale-down {
  0% {
    transform: scale(1);
    transform-origin: top left;
  }
  100% {
    transform: scale(0);
    transform-origin: bottom right;
  }
}

此处您要重置转换属性而不是附加到它

而不是

transform: scale(1);

使用

transform: translate(-50%, -40%) scale(1);

确保新的总是在最后

变换比例动画从错误的位置开始

Transform scale animation begins from wrong position

html

css

transform

translate

scale