Beautiful Fall: Gravity CSS3 Animation

A long time ago (in the summer of 2014), when I worked hard with the design, I faced the following problem. I wanted to use CSS3 to create a bouncing ball effect with the natural laws of physics. I went through the Internet in search of some way to “inhale” gravity in my ball.

After a few hours of browsing Stackoverflow and CSS docks, I found a few options, but it still didn’t work for me. Using Javascript and Jquery would be superfluous and inefficient for such a simple task, which, it seems, should be easily solved using the existing options for animation in CSS3.

I first tried to use ease-in (ease-out) transitions, which are represented by CSS. But despite the fact that they looked fairly smooth, it was too difficult to achieve a sense of naturalness. And each new jumping object would need a completely new function, which is very time consuming to select. Many sites I visited suggested using cumbersome keyframe functions to describe the animation of each jump. The code of these functions looks too complicated and redundant. Moreover, the resulting object jumps looked jerky and unprofessional.

Decision

In the end, I started experimenting with cubic Bezier curves . But all the examples that I found were a little bit wrong. However, it was closest to what I wanted to achieve. I started from scratch, spending hours trying to properly configure this flexible feature, until finally something happened.
To easily accomplish your plan, you first need to define the jump animation by setting the overall change in the position of the object using the keyframe function:
')

@-webkit-keyframes bounce { from, to { bottom: [  ]px; height: [     ]px; /*     */ } 80% { bottom: [  ]px; height: [      ]px; } } 

Then, you need to calculate the required duration:

   ≈ ( ( (  ) - (  ) ) / 125 ) 

Adding just one CSS3 transition is enough to give a gravitational effect to the jumping object:

 #Myball { -webkit-animation: bounce [ ] cubic-bezier(0.30, 2.40, 0.85, 2.50) infinite; } 

Effect application

Here are some potential ideas that will add gravity to the elements of the site in a few minutes.

Notification

The jumping effect can be used on websites as a means of drawing attention to a notification or a new unread message. The example below shows a version of an unread message for an online email client.

Bouncing ball

This implementation shows the typical behavior of an object under the action of gravity. Jump animation, which is actually just a shift with specially calculated time parameters, can also be combined with other effects. In this example, you can see the rotation and the slight change in the size of the ball in order to add the illusion of elasticity. The shadow is simply scaled at the same time with each jump using the same magic cubic Bezier curves.

Flattening effect

This effect may look quite complicated, but it uses the same features as all the above examples. The letter "I" is deformed and the lamp jumps using exactly the same cubic Bezier curves. With this synchronous animation, the lamp seems to flatten the letter “I”.

The animation can be viewed on the demo page , and the source code on Github.