A new version of Inspect Element is coming soon! Subscribe to the newsletter for updates. Subscribe

Ring a Bell with CSS Keyframe Animations

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.

by @tkenny

You should follow me on Twitter here

Newsletter

Subscribe to the Inspect Element email for updates on articles, tutorials and WordPress themes: