首页 文章

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

提问于
浏览 次
3

这个问题在这里已有答案：

我最近一直在玩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％之间应用缓出，那么会模仿一个轻松的功能 .

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

css animation

1 回答

  • 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>
    回复于

相关问题