Bounce Element Around Viewport in CSS

This CSS-only animation creates a bouncing element effect, mimicking a screensaver or Pong game. The key is using viewport units (vw and vh) and calc() to dynamically determine the element's movement within the browser window, regardless of its size. The animation cleverly separates the X and Y axes into separate animations on a parent and child element, allowing for independent direction reversals and a more natural bounce.

The original code uses two nested divs: a parent and a child. The parent handles the horizontal movement, while the child handles the vertical movement. This allows for independent control of the X and Y bounce.

Here's a breakdown of the code:

HTML Structure:

<div class="container">
  <div class="bouncer"></div>
</div>

CSS Styling:

The CSS utilizes custom properties (variables) for better control and readability:

:root {
  --width: 100px; /* Size of the bouncing element */
  --x-speed: 13s; /* Horizontal animation speed */
  --y-speed: 7s;  /* Vertical animation speed */
  --transition-speed: 2.2s; /* Transition speed for smoother bounce */
}

.container { /* Parent element for horizontal movement */
  animation: x var(--x-speed) linear infinite alternate;
}

.bouncer { /* Child element for vertical movement */
  width: var(--width);
  height: var(--width);
  background-color: #007bff; /* Example color */
  border-radius: 50%; /* Makes it a circle */
  animation: y var(--y-speed) linear infinite alternate;
  /* Add transition for smoother bounce */
  transition: transform var(--transition-speed) ease-in-out;
}

@keyframes x {
  100% {
    transform: translateX(calc(100vw - var(--width)));
  }
}

@keyframes y {
  100% {
    transform: translateY(calc(100vh - var(--width)));
  }
}

This approach avoids the need for JavaScript, keeping the code concise and efficient. The alternate keyword in the animation property reverses the animation direction automatically, creating the bouncing effect. The calc() function ensures the element bounces to the edges of the viewport, dynamically adjusting to different screen sizes. The addition of a transition property on the .bouncer class provides smoother transitions between bounce directions. Adjusting the --x-speed, --y-speed, and --width variables allows for customization of the animation's speed and size.

The above is the detailed content of Bounce Element Around Viewport in CSS. For more information, please follow other related articles on the PHP Chinese website!