翻译和缩放动画问题 [英] Translate and scale animation issue

问题描述

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

我正在尝试弹出元素然后移动在Y轴上，但以上操作无效。

I'm trying to make my element pop then move on the Y axis, but the above fails to work.

我要去哪里了？

推荐答案

在动画期间，Transform属性将被覆盖。因此，即使0％的关键帧表示在Y轴上平移40％，第二个10％的关键帧也会使它无效。在0％到10％之间移动，但几乎看不见，因为该元素才刚刚出现。

Transform property gets overridden during your animation. So even though the keyframe at 0% says translate by 40% in Y-axis, the second frame at 10% nullifies it. There is a movement between 0% and 10% but that is almost invisible because the element is just then coming into view.

您需要保留 translate（0，40％）直到元素需要在Y轴上保持平移40％的时间。在下面的代码段中，我将其保留在翻译位置，直到动画持续时间的 20％，然后从 20％到 100％会返回到原始位置。

You need to retain the translate(0, 40%) till the time the element needs to remain translated by 40% in the Y-axis. In the below snippet, I have retained it at the translated position till 20% of the animation duration and then from between 20% to 100% it goes back to the original position.

@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>

这篇关于翻译和缩放动画问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！