CSS3 animation works in FF but not chrome

Posted 19 November 2012 - 09:34 AM

I'm trying to animate a text box when it's clicked using this CSS:

.mainInput {
	border-radius: 100px;
	width: 60px;
	height: 20px;
	-webkit-transition: width 2s, height 2s, margin 2s, background-color 2s, background-size 2s, background-image 2s, -webkit-repeating-linear-gradient 2s, font-size 2s, border-width 2s;
	-moz-transition: -moz-repeating-linear-gradient 2s, width 2s, height 2s, margin 2s, background-color 2s, background-size 2s, background-image 2s, font-size 2s, border-width 2s;
}

.mainInput:focus {
	width: 200px;
	height: 50px;
	margin: 0 0 20px 0;
	background-color: #eaeaea;
	background-size: 20px 20px;
	background-image:
		-webkit-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px),
		-webkit-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);
	background-image:
		-moz-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px),
		-moz-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);
	background-image:
		-o-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px),
		-o-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);
	background-image:
		repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px),
		repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);
	font-size: 50px;
	border-width: 20px;
}

The animation works perfectly in Firefox but not in Chrome. I've attached all three files so you can see for yourself.
the Javascript is in .txt format.