关于单个代码,我有两个问题.

我一直试图制作一个文本,其中的字母将在悬停时跳跃和翻转,到目前为止,我已经设法使用简单的css动画产生了一些有趣的结果.

但是,由于我将字母旋转两次(360度360度),它们完成第一次旋转,暂停,然后继续进行第二次旋转.是否有可能使两个旋转无缝地相互补充.也许我应该摆弄时间功能(第一个是轻松进入,第二个是轻松出局？)？

我的问题的第二部分可能与java脚本有关.我花了一些时间寻找我的问题的答案,java脚本似乎是唯一的答案.即使鼠标不再在字母上,我也希望动画能够继续.我在这里找到了类似的问题：css3 animation on :hover; force entire animation
然而,经过一些摆弄它,我无法使它在我的代码上工作.
如果有人能帮助我,我将非常感激.
这是我一直在使用的代码：https://jsfiddle.net/j3j5vLL9/.JS部分不起作用.

@keyframes jump {
  0% {transform:scale(1, 1);bottom:0px;}
  10% {transform:scale(1.2, 0.7); bottom:0px;}
  20% {transform:scale(0.8, 1.2); bottom:0px;transform:rotateZ(0deg);}
  50% {transform:scale(1, 1); bottom:70px; transform:rotateZ(-360deg);}
  80% {transform:scale(1, 1); bottom:0px; transform:rotateZ(-720deg);}
  90% {transform:scale(1.2, 0.7);bottom:0px;}
  100% {transform:scale(1, 1);bottom:0px;}
}

提前感谢任何关心帮助的人. 🙂

最佳答案 对于效果,您可以将动画调整更改为动画定时功能：cubic-bezier(1,1,0,0).对于js你可以试试Ismail的答案.这是一个功能问题：

随着轻松进入：

 正如您所看到的,该函数达到0.因此您可以使用以下方法更改它：

JsFidlle