如何让我的注册按钮像球一样在我的网站上跳?

Question

我想要一个跳跃动画，但不变形按钮(像这里:https://codepen.io/w3core/pen/ZbJeXm):

@keyframes jump {
0%   {transform: translate3d(0,0,0) scale3d(1,1,1);}
40%  {transform: translate3d(0,30%,0) scale3d(.7,1.5,1);}
100% {transform: translate3d(0,100%,0) scale3d(1.5,.7,1);}
}
.jump {
transform-origin: 50% 50%;
animation: jump .5s linear alternate infinite;
}
/* For demo: */
body {text-align: center;}
body * {margin: 2em 2em 0; text-align: center; vertical-align: middle; font-family: sans-serif, sans; font-weight: bold;}

这可能吗?

我尝试了一个上下循环，但我不喜欢最后的结果…

Answer 1

从关键帧中删除scale3d指令:

@keyframes jump {
0%   {transform: translate3d(0,0,0);}
40%  {transform: translate3d(0,30%,0);}
100% {transform: translate3d(0,100%,0);}
}

这里应该有"jump"如您所愿，但形状将不再改变。

其他的都可以保持原样。

看到:

@keyframes jump {
0%   {transform: translate3d(0,0,0);}
40%  {transform: translate3d(0,30%,0);}
100% {transform: translate3d(0,100%,0);}
}
.jump {
transform-origin: 50% 50%;
animation: jump .5s linear alternate infinite;
}
/* For demo: */
body {text-align: center;}
body * {margin: 2em 2em 0; text-align: center; vertical-align: middle; font-family: sans-serif, sans; font-weight: bold;}

<img class="jump" width="64" src="https://upload.wikimedia.org/wikipedia/commons/8/8d/KDE_logo.svg" alt="" />
<img class="jump" width="64" src="http://icons.iconarchive.com/icons/google/chrome/256/Google-Chrome-icon.png" alt="" />
<div class="jump" style="display:inline-block; color:#fff; background:#05b; border-radius:50%; padding:1em; text-shadow:0 0 .5em; box-shadow:inset 0 0 1em rgba(0,0,0,.8)">Awesome!</div>
<h1>CSS3 jump animation</h1>