0 Replies - 1313 Views - Last Post: 19 November 2012 - 09:34 AM

#1 njgmoorman  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 65
  • Joined: 02-October 12

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.Attached File  datconvseparate.html (2.52K)
Number of downloads: 10Attached File  datconvseparate.css (8.01K)
Number of downloads: 40Attached File  datconvseparate.txt (6.41K)
Number of downloads: 45

Is This A Good Question/Topic? 0
  • +

Page 1 of 1