Guide to repairing a CSS ball animation

Question

Guide to repairing a CSS ball animation

I am attempting to create a simulation where a ball moves in the following pattern: bottom right -> top center -> bottom (/) left. However, my animation seems to be moving from top right -> bottom center -> top left (/).

#stage {
 height:300px;
 border:1px solid #000;
}
#ball {
  position:relative;
  width:50px;
  height:50px;
  border-radius:50%;
  background-color:red;
  animation:ball-move 2s infinite reverse linear 2s,
  color-change 2s infinite alternate 2s;
}
@keyframes ball-move {
  /* your keyframe styles go here */
  0% {
    top:50px;   
    left:50px;
  }
  50% {
    top:calc(100% - 50px); 
    left:calc(50% - 25px); 
  } 
  100% {
    top:0;
    left:calc(100% - 50px);
  }
}

<div id="stage">
  <div id="ball"></div>
</div>

html css

Answer 1

Answer №1

Make adjustments to the keyframes. Only the "top" ones need modification.

#stage {
  height: 300px;
  border: 1px solid #000;
}
#ball {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  animation: ball-move 2s infinite reverse linear 2s,
    color-change 2s infinite alternate 2s;
}
@keyframes ball-move {
  /* your keyframe styles go here */
  0% {
    top: calc(100% - 50px);   
    left: 50px;
  }
  50% {
    top: 0px; 
    left: calc(50% - 25px); 
  } 
  100% {
    top: calc(100% - 50px);
    left: calc(100% - 50px);
  }
}

<div id="stage">
  <div id="ball"></div>
</div>

Answer 2

Make adjustments to the keyframes. Only the "top" ones need modification.

#stage {
  height: 300px;
  border: 1px solid #000;
}
#ball {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  animation: ball-move 2s infinite reverse linear 2s,
    color-change 2s infinite alternate 2s;
}
@keyframes ball-move {
  /* your keyframe styles go here */
  0% {
    top: calc(100% - 50px);   
    left: 50px;
  }
  50% {
    top: 0px; 
    left: calc(50% - 25px); 
  } 
  100% {
    top: calc(100% - 50px);
    left: calc(100% - 50px);
  }
}

<div id="stage">
  <div id="ball"></div>
</div>

Answer 3

Answer №2

#container{
            box-sizing: border-box;
            width:  400px;
            height: 190px;
            margin:  0 auto;
            border: 1px solid gray;
            background: #fefefe;
        }

        .ball{
            width: 50px;
            height: 50px;
            background: tomato;
            border:  1px solid crimson;
            border-radius: 50%;
            position: relative;
            animation:  bounce 2s infinite cubic-bezier(.5,.5,.5,.5) alternate;
        }

        @keyframes bounce{
        0%{
            top: calc(100% - 50px);
            left: calc(100% - 50px);
        }

        50%{
            left:  calc(50% - 50px);
            top: 0;
        }

        100%{
            top:  calc(100% - 50px);
            left: 0;
        }
    }

<body>
    <div id="container">
        <div class="ball"></div>
    </div>
</body>

I believe this code snippet can assist you in resolving your problem.

Answer 4

#container{
            box-sizing: border-box;
            width:  400px;
            height: 190px;
            margin:  0 auto;
            border: 1px solid gray;
            background: #fefefe;
        }

        .ball{
            width: 50px;
            height: 50px;
            background: tomato;
            border:  1px solid crimson;
            border-radius: 50%;
            position: relative;
            animation:  bounce 2s infinite cubic-bezier(.5,.5,.5,.5) alternate;
        }

        @keyframes bounce{
        0%{
            top: calc(100% - 50px);
            left: calc(100% - 50px);
        }

        50%{
            left:  calc(50% - 50px);
            top: 0;
        }

        100%{
            top:  calc(100% - 50px);
            left: 0;
        }
    }

<body>
    <div id="container">
        <div class="ball"></div>
    </div>
</body>

I believe this code snippet can assist you in resolving your problem.

Guide to repairing a CSS ball animation

Answer №1

Answer №2

Similar questions

Tips for eliminating the space within the '<td>' border tags

Adding an event listener to detect left or right mouse clicks - using onclick doesn't capture right clicks

Locating HTML snippets within a document

What is the reason behind certain websites not displaying a .php extension at the end of their file names?

Repairing the Left-sided Popup Leaflet

Swap out the content in a text input box with the text chosen from a suggested autocomplete option

The title element is persistently appearing on the same line

How can I show/hide a div based on checkbox click on my website? It works in jsFiddle, but not on my actual site. Any suggestions?

What could be the reason why the toggleClass function is not being run

Dynamically showcasing content in an HTML table

Bring to the front the div altered by a CSS3 animation

Looking for a way to update a world map image by selecting multiple checkboxes to apply a flood fill color to different countries using Mogrify

When a class and ID are dynamically applied, the click event may not fire and the CSS may not be applied

Using multiple <img> tags with identical src attributes

What happens in the React tutorial when the clear fix is commented out and the appearance does not change?

I am dealing with a set of divs wrapped in a flex container that tend to overlap each other. Their heights vary and sometimes they wrap multiple times. Any suggestions on how to prevent this

Text appearing in varying sizes across browsers

arrangement of form labels in material-ui

Streaming HTTP content on a domain secured with HTTPS using HTML5

Ways to change content within an editable div without altering the current cursor location