Css Bell Shake Animation

Introduction

CSS animations allow web developers to add dynamic and engaging effects to their websites. One popular animation effect is the bell shake. In this tutorial, we will explore how to create a bell shake animation using CSS.

Getting Started

To create the bell shake animation, we need to define a bell shape using HTML and CSS. We will use CSS keyframes to animate the bell’s movement.

HTML Markup

First, let’s create the HTML markup for the bell:

In this markup, we have a container div with the class “bell”. Inside the container, we have three child divs: “top”, “bottom”, and “clapper”. These divs will represent the different parts of the bell.

CSS Styling

Next, let’s add some CSS styling to create the bell shape:

.bell { width: 100px; height: 120px; background-color: #f3f3f3; border-radius: 50%; position: relative; } .top, .bottom { width: 80px; height: 50px; background-color: #f3f3f3; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } .top { border-top-left-radius: 50%; border-top-right-radius: 50%; } .bottom { border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } .clapper { width: 10px; height: 70px; background-color: #dcdcdc; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transform-origin: bottom; } 

In this CSS code, we set the dimensions and background color for the bell and its parts. We also position the parts using absolute positioning and transform properties.

Creating the Animation

Now that we have the bell shape, let’s create the animation using CSS keyframes:

@keyframes shake { 0% { transform: rotate(0deg); } 25% { transform: rotate(10deg); } 50% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } 100% { transform: rotate(0deg); } } .bell:hover .clapper { animation: shake 0.5s infinite; } 

In this code, we define the keyframes for the shake animation. The bell will rotate clockwise and counterclockwise at different points in the animation. We then apply the animation to the clapper div when the bell is hovered over.

Conclusion

In this tutorial, we learned how to create a bell shake animation using CSS. The animation adds a playful and interactive element to your website. Feel free to experiment with different keyframe values and durations to customize the animation according to your needs.