Contact Number

+91 908 908 6161

Email Address

info@darlic.com

Sign up
Login

Darlic®Bits

CSS3 Bounce Animation Effects

Array

Hey, today you will get to know the code to bounce the ball infinite times.

The bouncing ball code mainly comprises of three steps. Firstly, the ball element is specified to use the keyframe rule (rule specifies the animation) and animation (lets an element gradually change from one style to another) length time is set. At the completion of the animation, the direction reverses and therefore, runs the animation for infinite times.

To start with create a layout by specifying classes container, ball and shadow.

CSS Structure

The container class sets the position of the layout. Then, ball class is applied with the animation bounce, and for a duration of 1 second after which it keeps on bouncing due to the iteration value infinite. Animation-fill mode is used to specify the style for the element when the animation is not running and in this case, the value is none.

To use CSS animation, keyframes are required for the animation. This allows the animation to gradually change from the current style to the new style at certain times. The style change is specified by keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.

Now everything is completed, here is how you will see the bouncing ball animation.

Post navigation

Previous
Next

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

PreviewDownloadEdit

Share

  • Facebook
  • LinkedIn
  • twitter
  • whatsapp

About Darlic®

Darlic® is innovative platform to create websites, web applications, progressive web applications, mobile applications without a pain. Darlic® is registered Trademark of OXO IT SOLUTIONS PRIVATE LIMITED.

Links

  • Home
  • About
  • Features
  • Templates
  • Career
  • Blog
  • Contact

Resources

  • Documentation
  • Resources
  • Tools
  • Bits
  • Learn
  • Ask

Email Address

info@darlic.com

Contact Number

+91 908 908 6161

Social Links

Copyright Right
  • Privacy Policy
  • Terms and Condition