Shulou(Shulou.com)06/01 Report--

Editor to share with you how css to achieve bouncing ball animation effect, I believe that most people do not know much, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1. Define animation keyframes

For this animation, we will use two keyframes-one to translate the ball horizontally at a constant speed, and the other to apply a roughly parabolic vertical bounce motion. You can combine horizontal and vertical translation into a Keyframe, but this has no effect on the effect we are pursuing.

Horizontal motion can be easily achieved using the following keyframes:

@-webkit-keyframestravel {

From {}

To {left:640px;}

}

@ keyframestravel {

From {}

To {left:640px;}

}

This Keyframe will be referenced later with the specified name "travel" and applied using linear (conversion timing function), which changes direction with each iteration.

For vertical bounce and animation, we want to use the easy-to-use and gradual-out timing functions to simulate the influence of gravity field:

@-webkit-keyframesbounce {

From,to {

Bottom:0

-webkit-animation-timing-function:ease-out

}

50% {

Bottom:220px

-webkit-animation-timing-function:ease-in

}

}

@ keyframesbounce {

From,to {

Botttom:0

Animation-timing-function:ease-out

}

50% {

Bottom:220px

Animation-timing-function:ease-in

}

}

The keyframe has been named "bounce" for future reference.

Combining these two keyframes will make our ball move 640 pixels horizontally and 220 pixels vertically. Of course, these values need to be adjusted to fit the size of the stage.

2. Set the stage of animation

As usual, we first set up a "stage" in which to perform animation. In this case, a simple DIV with a size of 660x240 pixels. It would be nice to have a width of 100%, but it is difficult to place some elements without knowing the exact pixel width.

# stage {

Position:relative

Margin:1emauto

Width:660px

Height:240px

Border:2pxsolid#666

Background:#cff

}

At this stage, we will set up a DIV element that moves horizontally back and forth, where it represents the DIV of the "ball" bouncing up and down:

# traveler {

Position:absolute

Width:20px

Height:240px

-webkit-animation-name:travel

-webkit-animation-timing-function:linear

-webkit-animation-iteration-count:infinite

-webkit-animation-direction:alternate

-webkit-animation-duration:4.8s

Animation-name:travel

Animation-timing-function:linear

Animation-iteration-count:infinite

Animation-direction:alternate

Animation-duration:4.8s

}

# bouncer {

Position:absolute

Width:20px

Height:20px

Background:red

Border-radius:10px

-webkit-animation-name:bounce

-webkit-animation-iteration-count:infinite

-webkit-animation-duration:4.2s

Animation-name:bounce

Animation-iteration-count:infinite

Animation-duration:4.2s

}

So the size of the ball is 20x20 pixels and rounded corners.

3. Set up the ball movement

We have completed some simple HTML tags:

If your browser supports it, the animation starts automatically and continues indefinitely in the box below (or # stage):

The above is all the contents of the article "how to achieve bouncing ball animation in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.