# Jumping in Javascript **URL:** \ **Category:** programming\ **Created:** [June 23, 2019, 8:49pm UTC](https://forum.kirupa.com/t/jumping-in-javascript/639970 "2019-06-23T20:49:43Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![kvapster](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kvapster/32/9132_2.png) [@kvapster](https://forum.kirupa.com/u/kvapster)\ **Post date:** [June 23, 2019, 8:49pm UTC](https://forum.kirupa.com/t/jumping-in-javascript/639970/1 "2019-06-23T20:49:44Z")
Hello, I added some jumping here and it seems to work most of the time. [http://muskiecoding.com/movejump.html](http://muskiecoding.com/movejump.html) It seems to work most of the time with a glitch once in awhile depending on how quickly or frequency of hitting the space bar. Is there a more eloquent solution or something else I can add for fine-tuning? The CSS ```auto @keyframes ball{ 0%{transform:translate(0,0)} 50%{transform:translate(0,5px) } 0%{transform:translate(0,0) } } @keyframes ball-jump{ 0%{width:60px;height:60px;box-shadow:0px 0px 0px black;} 50%{width:100px;height:100px;box-shadow:17px 17px 40px black;} 100%{width:60px;height:60px;box-shadow:0px 0px 0px black;} } ``` The JS ````auto if(jump==true){ ball.style.animationName="ball-jump" setTimeout(timebounce,600) }``` function timebounce(){ ball.style.animationName="ball"; } ```` ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [June 24, 2019, 4:34am UTC](https://forum.kirupa.com/t/jumping-in-javascript/639970/2 "2019-06-24T04:34:07Z")
I would suggest using a [CSS Transition](https://www.kirupa.com/html5/introduction_css_transitions.htm). That will avoid you having to deal with hardcoded keyframe values where if you jump in the middle of an animation, the movement looks unnecessarily…jumpy 🙂 Here is an example: ``` Jumping
``` ---
**Author:** ![kvapster](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kvapster/32/9132_2.png) [@kvapster](https://forum.kirupa.com/u/kvapster)\ **Post date:** [June 25, 2019, 4:56am UTC](https://forum.kirupa.com/t/jumping-in-javascript/639970/3 "2019-06-25T04:56:11Z")
I saw “transition” and immediately thought “doh!, Why didn’t I think of that?” ---
**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\ **Post date:** [June 25, 2019, 5:04am UTC](https://forum.kirupa.com/t/jumping-in-javascript/639970/4 "2019-06-25T05:04:04Z")
IMO, as soon as you start to want to encounter real-world physics, you should use a library or framework that calculates those things for you. Like boxbox in this throwaway project I did in school: [http://temp.reclipse.net/NW30-alley/](http://temp.reclipse.net/NW30-alley/)