平移和缩放动画问题

Question

@keyframes my-animation {
    0% {
        transform: translate(0, 40%) scale(0);
    }
    10% {
        transform: scale(1.1);
    }
    20% {
        transform: scale(1);
   }
   100% {
        transform: translateY(0%);
   }
}

我试图让我的元素弹出然后在 Y 轴上移动，但上面的方法不起作用。

我哪里错了？

Answer 1

Transform 属性在您的动画过程中被覆盖。因此，即使 0% 处的关键帧表示在 Y 轴上平移 40%，10% 处的第二个帧也会使其无效。在 0% 和 10% 之间有一个移动，但这几乎是不可见的，因为该元素刚刚进入视野。

您需要保留translate(0, 40%)直到元素需要在 Y 轴上保持平移 40% 为止。在下面的代码片段，我在，直到平移位置保留它20%的动画时间，然后从之间20%，以100%它回到原来的位置。

@keyframes my-animation {
    0% {
        transform: translate(0, 40%) scale(0);
    }
    10% {
        transform: translate(0, 40%) scale(1.1);
    }
    20% {
        transform: translate(0, 40%) scale(1);
   }
   100% {
        transform: translateY(0%);
   }
}
div{
  height: 100px;
  width: 100px;
  border: 1px solid;
  animation: my-animation 4s linear forwards;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Some</div>