Help. I want to bounce 2 balls, but they teleport instead of fluid movement

I am trying to make 2 balls bounce down and up like basketballs, but they teleport to the bottom and back up to the top without motion. What is wrong with the code? Also, how do I cut and paste code into the window so it keeps its formatting so it’s easier to read?

<style>

  .balls {

    border-radius: 50%;

    background: linear-gradient(

      35deg,

      #ccffff,

      #ffcccc

    );

    position: fixed;

    width: 50px;

    height: 50px;

    margin-top: 50px;

    animation-name: bounce;

    animation-duration: 2s;

    animation-iteration-count: infinite;

  }

  #ball1 {

    left:27%;

  }

  #ball2 {

    left:56%;

  }

  @keyframes bounce {

    25% {

      bottom: 50%;

    }

  }

</style>

<div class="balls" id="ball1"></div>

<div class="balls" id="ball2"></div>

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.