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

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

CodePudding user response：

It is possible to create a jump animation that does not deform the button. One way to do this is to use a combination of translate and scale transformations to move the button up and down without changing its shape. The following code is an example of a jump animation that uses translate and scale transformations to move the button up and down without deforming it:

@keyframes jump {
0% {transform: translateY(0) scaleY(1);}
40% {transform: translateY(-30%) scaleY(1.5);}
100% {transform: translateY(-100%) scaleY(1);}
}
.jump {
transform-origin: 50% 50%;
animation: jump .5s linear alternate infinite;
}

In this code, the translateY transformation is used to move the button vertically, while the scaleY transformation is used to change the height of the button without affecting its width. This allows the button to move up and down without deforming its shape.

You can adjust the values of the translateY and scaleY transformations to change the motion and appearance of the animation. For example, you could increase the translateY value to make the button move higher, or decrease the scaleY value to make the button move more vertically without changing its height. Experiment with different values to find the animation that looks and behaves the way you want.

CodePudding user response：

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  width="64" src="https://upload.wikimedia.org/wikipedia/commons/8/8d/KDE_logo.svg" alt="" />
  <img  width="64" src="http://icons.iconarchive.com/icons/google/chrome/256/Google-Chrome-icon.png" alt="" />
  <div  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>