为什么我的弹跳动画从应该开始的位置开始50px以上?

问题描述 投票:0回答:1

我尝试用文本创建弹跳效果

https://codepen.io/rybohi/pen/YzydGPo这是我认为错误所在的位置

@keyframes jump{

  0%, 40%{
    transform:scale(2,.5) translate(0,100px);
  }

  45%,55%{
    transform:translate(0,-50px);
  }

  55%, 100%{
    transform:translate(0,0);
  }
}

但是由于某些原因,我有一个错误反弹影响从应该开始的位置上方开始50px有帮助吗?

javascript html css animation
1个回答
0
投票

我不确定要了解您要达到的目标,但这可能会有所帮助:

  0%, 40%{
    /* Replace 100px with 200px */
    transform:scale(2,.5) translate(0,200px);
  }

字母将立即被“压碎”,但它们将大致保持在原处。

translate功能似乎受所使用的音阶影响。


0
投票

这是因为您在动画开始时应用了缩放比例:

 0%, 40%{
    transform:scale(2,.5) translate(0,100px);
 }

您已经从翻译的字母开始(在您的.test类中开始,因此,在缩放字母时,它也会缩放翻译。

如果删除缩放比例,您将看到开始时没有50px的跳动。

© www.soinside.com 2019 - 2024. All rights reserved.