CSS Animations with Only One Keyframe

Lea Verou presents a really simple solution to something that has always bugged me about CSS animations, having to duplicate the start/end states:

Normally you would do something like this:

@keyframes pound {
	from { transform: none; }
	50% { transform: scale(1.4); }
	to { transform: none; }

But it turns out you can also just do this:

@keyframes pound {
	50% { transform: scale(1.4); }

Which is just awesome! Less code, less repetition, and better performance! We all win! :-)


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s