CSS动画转换转换也更改了Translatex，但在动画中未指定

Question

在这里，我有一个简单的CSS文件，其中包含2个动画。

.div
    transform: translateX(-50%);
}

.fade-in {
    animation-name: fade-in;
    animation-duration: .2s;
}

.fade-out {
    animation-name: fade-out;
    animation-duration: .2s;
}

@keyframes fade-out {
    0% {
        opacity: 100%;
    }
    100% {
        opacity: 0%;
        transform: translateY(-10px);
    }
}

@keyframes fade-in {
    0% {
        opacity: 50%;
        transform: translateY(-10px);
    }
    100% {
        opacity: 100%;
    }
}

为什么我只在动画键框中指定了翻译，它也会操纵转换属性中的Translatex？我该如何做到这一点，以便它只会改变y值？

Answer 1

您正在覆盖变换 peropty。 Merge 转换：Translatex（-50％）和变换：translatey（-10px）; by do：transform：transform：transforate：-50％，-10px）;

执行此操作：

.div {
  transform: translateX(-50%);
}
.fade-in {
  animation-name: fade-in;
  animation-duration: .2s;
}
.fade-out {
  animation-name: fade-out;
  animation-duration: .2s;
}
@keyframes fade-out {
  0% {
    opacity: 100%;
  }
  
  100% {
    opacity: 0%;
    transform: translate(-50%, -10px); /* NEW */
  }
}
@keyframes fade-in {
  0% {
    opacity: 50%;
    transform: translate(-50%, -10px); /* NEW */
  }
  
  100% {
    opacity: 100%;
  }
}

Answer 2

您覆盖整个transform属性 - 不仅仅是翻译。如果要保留translatex值，则必须将其包含在动画中。

@keyframes fade-out {
    0% {
        opacity: 100%;
        transform: translateX(-50%);
    }
    100% {
        opacity: 0%;
        transform: translateY(-10px) translateX(-50%);
    }
}