Ways to incorporate physics into CSS animations

Question

Ways to incorporate physics into CSS animations

Creating a loading screen with CSS and aiming for realistic behavior can be a challenge. Utilizing the

animation-timing-function: cubic-bezier(1, 0, 1, 1)

property gives a decent result, but perfecting it requires understanding how the parameters in cubic-bezier function truly work. Experimenting with different values on sites like this can help achieve desired effects.

In summary, achieving physically accurate behavior in animations can be challenging. While a CSS-only solution is preferred, incorporating JavaScript is also an option if necessary.

Below is an example:

body{
    background-color: #02a2bb;
}

.wrapper {
    padding: 50px;
    text-align: center;
}
.content {
    height: 125px;
    margin: 0 auto;
    position: relative;
    display: inline-block;
}
.ball {
    width: 25px;
    height: 25px;
    display: inline-block;
    border-radius: 50%;
    bottom: 0;
    position: relative;
    background-color: #fff;
    z-index: 1;
}
.ball-shadow {
    width: 20px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    bottom: 9px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
}
.animated {
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.animated.jump, .animated.displace, .animated.diffuse-scale {
    -webkit-animation-duration: 3s;
    -moz-animation-duration: 3s;
    -ms-animation-duration: 3s;
    -o-animation-duration: 3s;
    animation-duration: 3s;
}

... (Code continues)

</div>

Suggestion

Consider using a preprocessor like Less or SCSS to define physical variables and characteristics in your animations. These tools allow for easier manipulation of values and simulation of realistic behaviors through mixins or functions. It simplifies the process and keeps the solution purely CSS-based.

javascript html css css-animations

Answer 1

Answer №1

Utilizing CSS alone is possible, however, it requires a substantial amount of time to determine the correct values for Bezier curves, keyframe positions, scale adjustments, and more. Additionally, even minor changes in layout, dimensions, or distances can necessitate starting over from scratch.

CSS animations are appealing, but incorporating a small amount of JavaScript code can yield superior results and offer greater flexibility for making modifications:

Set a vector for the ball
Establish an arbitrary gravity value
Calculate the vector movement and bouncing
Apply resulting values to the DOM element using transforms (resulting in smoother animation compared to position changes).
Animate using requestAnimationFrame, which synchronizes with the monitor and produces animations as smooth as CSS animations.

Sample

This demonstration showcases the basics but excludes shadow effects – that aspect can be explored independently by the reader.

If a more precise floor bounce effect is desired, adjusting the actual position differential post-bounce can achieve this:

if (pos.y > bottom) {
    var diff = pos.y - bottom;
    pos.y = bottom - diff;
    ...

For multiple elements requiring similar animation, creating an object capable of instantiating references to animate, perform calculations, etc., proves beneficial.

To alter the direction, starting point, gravity, etc., simply update the corresponding values; playback will proceed seamlessly.

Intermediate Step Example for Generating CSS Keyframes

The above code can be adapted to compute numbers for a CSS-animation sequence.

Numerous frames can be normalized within a defined range, computations run based on frame count, data extracted per every specified interval (e.g., every 10 frames), including bounces, followed by formatting these figures into keyframes.

Incorporating top and bottom positions is pivotal, detectable through monitoring the vector’s y-value directional change (not illustrated here).

This approach serves as an interim procedure to generate associated CSS rules which will subsequently be utilized:

var v = {x: 2.3, y: 1},       // some vector
    pos = {x: 100, y: 20},    // some position
    g = 0.5,                  // some gravity
    absorption = 0.7,         // friction/absorption
    bottom = 150,             // floor collision
    frames = 0,               // to reset animation (for demo)
    maxFrames = 220,          // normalization parameter
    step = 10,                // interval specifier
    heights = [],             // storage array
    css = "";                 // CSS animation construction

// CSS-frame calculation
for(var i = 0; i <= maxFrames; i++) {
  var t = i / maxFrames;
  pos.x += v.x;              
  pos.y += v.y;
  v.y += g;                   

  if (pos.y > bottom) {
    pos.y = bottom;
    v.y = -v.y * absorption;
    heights.push({pst: t * 100, y: pos.y});
  }  
  else if (!(i % step)) {heights.push({pst: t * 100, y: pos.y})}  
}

// Formatting height-array into CSS
css += "@keyframes demo {\n";
for(i = 0; i < heights.length; i++) {
  var e = heights[i];
  css += "  " + e.pst.toFixed(3) + "% {transform: translateY(" + e.y.toFixed(3) + "px)}\n";
}
css += "}";

document.write("<pre>" + css + "</pre>");

Applying the resultant CSS to the final page yields the following outcome, showcasing solely the non-prefixed version during this demonstration:

(Advanced tweaking may be needed for optimal results, though the fundamental concept remains valid.)

div  {
  animation: demo 3s linear infinite;
  width:20px;
  height:20px;
  border-radius:50%;
  background:rgb(0, 148, 243);
  position:fixed;
  left:100px;
}

@keyframes demo {
  0.000% {transform: translateY(21.000px)}
  4.545% {transform: translateY(58.500px)}
  ...
}

<div></div>

Considering the precision required for such animations, I personally recommend leveraging JavaScript support over CSS due to its accuracy and adaptability to evolving demands.

Answer 2

Utilizing CSS alone is possible, however, it requires a substantial amount of time to determine the correct values for Bezier curves, keyframe positions, scale adjustments, and more. Additionally, even minor changes in layout, dimensions, or distances can necessitate starting over from scratch.

CSS animations are appealing, but incorporating a small amount of JavaScript code can yield superior results and offer greater flexibility for making modifications:

Set a vector for the ball
Establish an arbitrary gravity value
Calculate the vector movement and bouncing
Apply resulting values to the DOM element using transforms (resulting in smoother animation compared to position changes).
Animate using requestAnimationFrame, which synchronizes with the monitor and produces animations as smooth as CSS animations.

Sample

This demonstration showcases the basics but excludes shadow effects – that aspect can be explored independently by the reader.

If a more precise floor bounce effect is desired, adjusting the actual position differential post-bounce can achieve this:

if (pos.y > bottom) {
    var diff = pos.y - bottom;
    pos.y = bottom - diff;
    ...

For multiple elements requiring similar animation, creating an object capable of instantiating references to animate, perform calculations, etc., proves beneficial.

To alter the direction, starting point, gravity, etc., simply update the corresponding values; playback will proceed seamlessly.

Intermediate Step Example for Generating CSS Keyframes

The above code can be adapted to compute numbers for a CSS-animation sequence.

Numerous frames can be normalized within a defined range, computations run based on frame count, data extracted per every specified interval (e.g., every 10 frames), including bounces, followed by formatting these figures into keyframes.

Incorporating top and bottom positions is pivotal, detectable through monitoring the vector’s y-value directional change (not illustrated here).

This approach serves as an interim procedure to generate associated CSS rules which will subsequently be utilized:

var v = {x: 2.3, y: 1},       // some vector
    pos = {x: 100, y: 20},    // some position
    g = 0.5,                  // some gravity
    absorption = 0.7,         // friction/absorption
    bottom = 150,             // floor collision
    frames = 0,               // to reset animation (for demo)
    maxFrames = 220,          // normalization parameter
    step = 10,                // interval specifier
    heights = [],             // storage array
    css = "";                 // CSS animation construction

// CSS-frame calculation
for(var i = 0; i <= maxFrames; i++) {
  var t = i / maxFrames;
  pos.x += v.x;              
  pos.y += v.y;
  v.y += g;                   

  if (pos.y > bottom) {
    pos.y = bottom;
    v.y = -v.y * absorption;
    heights.push({pst: t * 100, y: pos.y});
  }  
  else if (!(i % step)) {heights.push({pst: t * 100, y: pos.y})}  
}

// Formatting height-array into CSS
css += "@keyframes demo {\n";
for(i = 0; i < heights.length; i++) {
  var e = heights[i];
  css += "  " + e.pst.toFixed(3) + "% {transform: translateY(" + e.y.toFixed(3) + "px)}\n";
}
css += "}";

document.write("<pre>" + css + "</pre>");

Applying the resultant CSS to the final page yields the following outcome, showcasing solely the non-prefixed version during this demonstration:

(Advanced tweaking may be needed for optimal results, though the fundamental concept remains valid.)

div  {
  animation: demo 3s linear infinite;
  width:20px;
  height:20px;
  border-radius:50%;
  background:rgb(0, 148, 243);
  position:fixed;
  left:100px;
}

@keyframes demo {
  0.000% {transform: translateY(21.000px)}
  4.545% {transform: translateY(58.500px)}
  ...
}

<div></div>

Considering the precision required for such animations, I personally recommend leveraging JavaScript support over CSS due to its accuracy and adaptability to evolving demands.

Ways to incorporate physics into CSS animations

Suggestion

Answer №1

Sample

Intermediate Step Example for Generating CSS Keyframes

Similar questions

Storing specific items in an array for easy access on the following page

Using jQuery to reload the page following a PHP form submission

What methods can be used to determine if a bound function is equal when performing unit testing?

Arranging search results in Django from the get_queryset method

The tooltip for the Google+ button stopped working

Creating a striking two-tone border pattern in an HTML document

Both if and else statements are carrying out code in JavaScript/jQuery

Text that appears as an HTML button is displayed after being compiled using the $

What are the best strategies for mastering conditional promises in Angular?

What is the proper way to nest HTML comments within one another?

When attempting to display the details of each restaurant on my detail page, I encountered the error "Cannot read property 'name_restaurant' of undefined."

NG0303: Unable to establish a connection with 'ngbTooltip' as it is not recognized as a valid property of 'button'

Dealing with the challenge of duplicate posts in JqWidgets context menu within a nested grid scenario

Applying CSS transitions and transforms to SVG elements

The Server Side Rendering in (Vue+Express) faltered due to inconsistencies in hydration

Can a function be called from outside its parent function?

Opacity is causing issues with hover effects in CSS

How can I include text input within a select option using angular-material?

Using Three.js to control the camera's position and direction

Exploring web pages with JavaScript events