{"id":16515,"date":"2013-02-22T23:01:43","date_gmt":"2013-02-22T15:01:43","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=16515"},"modified":"2025-04-04T01:29:23","modified_gmt":"2025-04-03T17:29:23","slug":"css3-bounce-effect","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-bounce-effect\/","title":{"rendered":"How to Create Bounce Effect with CSS3 Animation"},"content":{"rendered":"

Today, we are experimenting with CSS3 Animation. Previously, we explored how to create a \u201cmarquee\u201d effect using CSS3 Animation<\/a>. Now, we\u2019re going to craft a \u201cnotification bar\u201d that includes a bounce effect.<\/p>\n

Let\u2019s dive in.<\/p>\n

<\/i> View demo <\/span><\/a><\/p>\n

Getting Started<\/h2>\n

Let\u2019s create a new HTML document and add the following markup to structure the notification bar.<\/p>\n

\r\n<div class=\"css3-notification\">\r\n    <p>Hi, this is a notification and it bounces.<\/p>\r\n<\/div>\r\n<\/pre>\n
Next, let\u2019s add some stylish decorations to enhance the look of the notification bar.<\/p>\n
\r\n.css3-notification {\r\n    font-size: .8em;\r\n    text-align: center;\r\n    padding: 10px;\r\n    background-color: #111;\r\n    color: #fff;\r\n    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .3);\r\n    text-transform: uppercase;\r\n    position: relative;\r\n    font-weight: bold;\r\n}\r\n<\/pre>\n
This is how it will appear in browsers at this point.<\/p>\n
\"Basic<\/figure>\n
Writing CSS3 Animation Keyframes<\/h2>\n
The basic concept is that when an object initially drops and hits a surface, it bounces back to its highest point and then gradually reaches a lower height with each subsequent bounce until it comes to a stop. This motion is depicted in the image below.<\/p>\n
\"Illustration<\/figure>\n
Step 1: Creating Animation Keyframe<\/h3>\n
First, let\u2019s define our CSS3 Animation Keyframe in the stylesheet. We\u2019ll simply name this keyframe bounce<\/code>.<\/p>\n
\r\n@keyframes bounce {\r\n\r\n}\r\n<\/pre>\n
Remember, this tutorial uses the standard @keyframe<\/code> syntax from W3C for simplicity. However, for compatibility across browsers, vendor-specific prefixes like -webkit-<\/code>, -moz-<\/code>, and -o-<\/code> are essential and will be provided later in the source codes.<\/p>\n
Step 2: Specifying Initial Position<\/h3>\n
Initially, we set the object\u2019s position at the top. Using CSS3 Transforms, we apply a negative value for the Y-axis<\/strong>. Here, we specify the position from 0%<\/code> to 5%<\/code> of the animation duration, allowing the notification bar to remain briefly in that position.<\/p>\n
\r\n0% {\r\n    transform: translateY(-100%);\r\n    opacity: 0;\r\n}\r\n5% {\r\n    transform: translateY(-100%);\r\n    opacity: 0;\r\n}\r\n<\/pre>\n
Step 3: Specifying the First Bounce<\/h3>\n
Next, between 5%<\/code> and 15%<\/code> of the animation timeframe, the object moves towards its original position. We reset the translateY<\/code> property to 0%<\/code>. Notably, when an object bounces, it displays elasticity.<\/p>\n
Upon impacting a solid surface, the impacted side often compresses or deforms slightly. Accordingly, we reduce the padding-bottom<\/code> from 10px<\/code> to 5px<\/code> to simulate this effect.<\/p>\n
\r\n15% {\r\n    transform: translateY(0);\r\n    padding-bottom: 5px;\r\n}\r\n<\/pre>\n
After the impact, the object bounces upwards, reaching its peak height at 30%<\/code> of the timeframe, set at -50%<\/code> on the Y-axis.<\/p>\n
\r\n30% {\r\n    transform: translateY(-50%);\r\n}\r\n<\/pre>\n
Step 4: Specifying the Second Bounce<\/h3>\n
After reaching its highest point, the object returns to the 0<\/code> position, effectively hitting the ground again. This time, the object will be less deformed than during its first impact. We adjust the padding-bottom<\/code> to 6px<\/code>.<\/p>\n
\r\n40% {\r\n    transform: translateY(0%);\r\n    padding-bottom: 6px;\r\n}\r\n<\/pre>\n
The object then makes a second bounce, reaching a height lower than the first one; it moves up 30%<\/code> from its current position.<\/p>\n
\r\n50% {\r\n    transform: translateY(-30%);\r\n}\r\n<\/pre>\n
Step 5: Continuously Bouncing Until It Stops<\/h3>\n
The bouncing continues, diminishing slightly with each bounce until the end of the animation timeframe. Below are the settings for the remainder of the animation, from 70%<\/code> to 100%<\/code> of the duration.<\/p>\n
\r\n70% {\r\n    transform: translateY(0%);\r\n    padding-bottom: 7px;\r\n}\r\n80% {\r\n    transform: translateY(-15%);\r\n}\r\n90% {\r\n    transform: translateY(0%);\r\n    padding-bottom: 8px;\r\n}\r\n95% {\r\n    transform: translateY(-7%);\r\n}\r\n97% {\r\n    transform: translateY(0%);\r\n    padding-bottom: 9px;\r\n}\r\n99% {\r\n    transform: translateY(-3%);\r\n}\r\n100% {\r\n    transform: translateY(0);\r\n    padding-bottom: 9px;\r\n    opacity: 1;\r\n}\r\n<\/pre>\n
Now, you can view the bounce effect in action via the link below.<\/p>\n
<\/i>  View demo <\/span><\/a>\n<\/i>  Download codes <\/span><\/a><\/p>\n
Further Resources<\/h2>\n
Below are more resources for delving deeper into CSS3 Animation, Transformations, and Bounce Effects.<\/p>\n