Question

我正在学习CSS动画，并且遇到了transform的问题：scale（）;我有一个以transform为中心的元素：像这样：

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

动画从顶部和左侧属性定义的位置开始，并且不考虑变换：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属性，而不是附加到它

代替

transform: scale(1);

使用

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

确保新的总是在最后

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

1 个答案: