我尝试用文本创建弹跳效果
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有帮助吗?
我不确定要了解您要达到的目标,但这可能会有所帮助:
0%, 40%{
/* Replace 100px with 200px */
transform:scale(2,.5) translate(0,200px);
}
字母将立即被“压碎”,但它们将大致保持在原处。
translate
功能似乎受所使用的音阶影响。
这是因为您在动画开始时应用了缩放比例:
0%, 40%{
transform:scale(2,.5) translate(0,100px);
}
您已经从翻译的字母开始(在您的.test
类中开始,因此,在缩放字母时,它也会缩放翻译。
如果删除缩放比例,您将看到开始时没有50px的跳动。