title: CSS jumping animation
body: <p>I'll try my best to keep it as simple as I can without being too vague. Basically, I'm making a simple web application, and I've attempted on multiple times to make my character.gif jump after a button being pressed, but I am struggling to apply the logistics to getting the objects current position, incrementing its % from top and right, and then decreasing it to give of a 'jumping' effect. Any pointers would be vastly appreciated. (I haven't included the code for the button, as all it does is change the .character class's animation to the jump). Thanks for any and all responses!</p>
  
  <pre><code> .character {
        background-image: url('run.gif');
        background-size: 100px 70px;
        width: 100px;
        height: 70px;
        animation-name: characterMoving;
        animation-duration: 20s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        position: absolute;
        top: 80%;
        left: -1%;
  
  
      }
  
      @keyframes characterMoving {
        0% {
          left: -128px
        }
        100% {
          left: 100vw;
        }
      }
  
  //do jumping animation here
  @keyframes characterJumping{
    0% {
  
    }
    50% {
  
    }
    100% {
  
    }
  </code></pre>