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:
http://lea.verou.me/2012/12/animations-with-one-keyframe/

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! :-)

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s