How can I make my sign up button jump like a ball in my website?

Question

I want a jump animation but without deform the button (like here: 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;}

Is this possible?

I tried a loop that goes up and down but I don´t like the final result...

Answer 1

Remove the scale3d instructions from the keyframes:

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

This should have the items "jump" as you want them to, but the shape will no longer change.

Everything else can stay as-is.

See here:

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