CSS popout animation for highlighting elements

pop-out.css

.highlight {
	-webkit-animation-name: popout;
	-webkit-animation-duration: 0.3s;
	-webkit-animation-iteration-count: 1;
	-moz-animation-name: popout;
	-moz-animation-duration: 0.3s;
	-moz-animation-iteration-count: 1;
	animation-name: popout;
	animation-duration: 0.3s;
	animation-iteration-count: 1;
}

@-webkit-keyframes popout {
	0% {
		-webkit-transform: scale(1);
	}
	20% {
		-webkit-transform: scale(0.90);
		-webkit-animation-timing-function: ease-out;
	}
	50% {
		-webkit-transform: scale(1.2);
		-webkit-animation-timing-function: ease-in;
	}
	100% {
		-webkit-transform: scale(1);
		-webkit-animation-timing-function: ease-out;
	}
}

@-moz-keyframes popout {
	0% {
		-moz-transform: scale(1);
	}
	20% {
		-moz-transform: scale(0.90);
		-moz-animation-timing-function: ease-out;
	}
	50% {
		-moz-transform: scale(1.2);
		-moz-animation-timing-function: ease-in;
	}
	100% {
		-moz-transform: scale(1);
		-moz-animation-timing-function: ease-out;
	}
}

@keyframes popout {
	0% {
		transform: scale(1);
	}
	20% {
		transform: scale(0.90);
		animation-timing-function: ease-out;
	}
	50% {
		transform: scale(1.2);
		animation-timing-function: ease-in;
	}
	100% {
		transform: scale(1);
		animation-timing-function: ease-out;
	}
}