变换比例动画从错误的位置开始[重复]答案

【问题标题】：Transform scale animation begins from wrong position [duplicate]变换比例动画从错误的位置开始[重复]
【发布时间】：2019-09-23 12:48:16
【问题描述】：

我正在学习 CSS 动画，但遇到了 transform: scale(); 的问题。我有一个以变换为中心的元素： 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 属性定义的位置进行动画处理。我试图找到解决方案，但是我想出的唯一方法是以不同的方式将其居中，但我不能这样做，因为我需要一个响应式的宽度。

【问题讨论】：

任何可以显示您的问题的工作示例？

标签： html css transform scale translate

【解决方案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);

确保新的总是在最后

【讨论】：