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

发布于12月05日

我想要一个 skip 动画，但不会使按钮变形(如此处: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;}

这个是可能的吗？

我try 了一个上下循环，但我不喜欢最终的结果……

推荐答案

从关键帧中删除scale3d条指令:

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

这应该会让物品按照你想要的那样" skip "，但形状不会再改变.

其他一切都可以保持原样.

请看这里:

@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>