Ring a Bell with CSS Keyframe Animations

  • Tom Kenny

Time to have some more fun with a CSS animation as I’m going to show you how to realistically animate a ringing bell. Following on from the 3D lightbox animation tutorial I thought it would be good to get into a little more detail on how to create a realistic animation.

View Demo

The markup consists of only an image of the bell (from The Noun Project). The CSS (without the necessary vendor prefixes to save space here) does all the work:

img.bell {
	animation: ring 8s 1s ease-in-out infinite;
	transform-origin: 50% 4px;

The transform-origin will ensure the bell rotates from the top (50% from the left and 4px down from the top) as if the hook was connected to something.

@keyframes ring {
	0% { transform: rotate(0); }
	1% { transform: rotate(30deg); }
	3% { transform: rotate(-28deg); }
	5% { transform: rotate(34deg); }
	7% { transform: rotate(-32deg); }
	9% { transform: rotate(30deg); }
	11% { transform: rotate(-28deg); }
	13% { transform: rotate(26deg); }
	15% { transform: rotate(-24deg); }
	17% { transform: rotate(22deg); }
	19% { transform: rotate(-20deg); }
	21% { transform: rotate(18deg); }
	23% { transform: rotate(-16deg); }
	25% { transform: rotate(14deg); }
	27% { transform: rotate(-12deg); }
	29% { transform: rotate(10deg); }
	31% { transform: rotate(-8deg); }
	33% { transform: rotate(6deg); }
	35% { transform: rotate(-4deg); }
	37% { transform: rotate(2deg); }
	39% { transform: rotate(-1deg); }
	41% { transform: rotate(1deg); }
	43% { transform: rotate(0); }
	100% { transform: rotate(0); }

That may seem like a lot of code (especially when you add in the -webkit- and -moz- prefixes) but it’s all necessary in order to achieve a level of realism. Basically, the more keyframes you set, the more accurate you can get with the animation. As you can see in the demo the bell smoothly comes to a stop. That’s because we’re gradually reducing the amount it rotates to the left and right with each swing, just like a real bell would, although we do increase it at the beginning to indicate the bell is being rung in the first place.

The animation lasts 8 seconds but is only animating for 43% of that time as we don’t want it to create too much of a distraction if you imagine it on a page. If you do include it as part of a page, it would probably be better to limit it to a few, maybe 2 or 3, repeats rather than infinite as I’ve done here for the purpose of the demo.

To engineer the gap, set the rotation back to 0 at 43% and at 100%. This will ensure the bell remains still in its resting position for a period of time ready to be rung again when the animation loops round.

Don’t forget to include the vendor prefixes especially on the @keyframes property as @-webkit-keyframes and @-moz-keyframes. These are required currently for Chrome and Safari as well coming soon to FireFox. See the demo’s CSS file with all the prefix code.

Design Websites People Will Love


Learn why the best designers make the decisions they do to design successful websites people love in this FREE eBook with three in-depth case studies. I’ve spent hours studying what makes these websites amazing, so you can use what works and focus on your design work. Subscribe now to get it immediately.

Free. No spam. Unsubscribe any time.