A useful way to style images

Here is a technique I used recently when putting together a website for work. I had a bunch of images to display in the webpage. Each image should be displayed small, unless the user puts their mouse over it - then it should animate to becoming larger. To make this happen, I wrote the following css:

@keyframes enlarge {
	from { max-width: 500px; }
	to { max-width: 900px; }
}

@keyframes shrink {
	from { max-width: 900px; }
	to { max-width: 500px; }
}

img {
	animation-name: shrink;
	animation-duration: 1s;
	max-width: 500px;
}

img:hover {
	animation-name: enlarge;
	animation-duration: 1s;
	max-width: 900px;
}