Question

我最近玩过很多CSS动画。我对CSS动画的最大问题是动画定时功能。我的问题是该功能应用于关键帧的每个部分之间。我的意思是，如果我有一个代表div的多步动画：

@keyframes moveProjectTop{
    0%{
        transform: translateX(0px) translateY(0px) rotateZ(0deg);
    }
    50%{
        transform: translateX(125px) translateY(30px) rotateZ(30deg);
    }
    100%{
        transform: translateX(250px) translateY(60px) rotateZ(0deg);
    }
}

我想从这种转换中得到的是翻译动作具有弹跳效果，但我希望旋转不要。我不认为CSS是可行的。

我被引导相信这是因为：

1：转换不能分割为两个动画，这意味着所有转换都必须在1个关键帧动画下。

2：动画计时功能适用于每一步。

我认为解决方案与我的第二个细节有关。有没有办法让时间函数适用于整个动画而不是每个步骤之间（两个百分比之间）。另一个解决方案是，如果有一种方法可以在每个步骤之间应用不同的计时功能，如果我可以在0％-50％之间轻松应用，并且在50％-100％之间应用缓出，那么会模仿一个轻松的功能。

有没有人建议如何以这两种方式之一平滑动画？

Answer 1

一个想法是分割动画而不是翻译，你可以使用top / left，然后你就可以轻松控制每一个：

.box {
  width:60px;
  height:60px;
  background:red;
  position:relative;
  animation: bounce 2s infinite linear alternate,
              move 2s infinite ease-in  alternate;
}

@keyframes bounce{
    0%{
        transform:rotateZ(0deg);
    }
    50%{
        transform: rotateZ(30deg);
    }
    100%{
        transform:rotateZ(0deg);
    }
}
@keyframes move{
    0%{
        top:0px;
        left:0px;
    }
    50%{
        top:125px;
        left:30px;
    }
    100%{
        top:250px;
        left:60px;
    }
}

<div class="box">

</div>

我可以让动画计时功能影响整个动画而不是动画的每一步吗？

1 个答案: