翻译和缩放动画问题答案

【问题标题】：Translate and scale animation issue翻译和缩放动画问题
【发布时间】：2015-09-14 01:28:25
【问题描述】：

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

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

我哪里错了？

【问题讨论】：

transform 覆盖任何先前的转换属性

标签： css css-animations css-transforms

【解决方案1】：

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

您需要保留 translate(0, 40%) 直到元素需要在 Y 轴上保持平移 40%。在下面的 sn-p 中，我将它保留在翻译位置直到动画持续时间的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>

【讨论】：