Please help making webkit less laggy in chrome

HTML & CSS
1

Hi guys,
I was helping develop this webkit css3 code that animates a background and it works fine in safari, but it seriously lags quite a bit in chrome, which is a webkit browser as well.

Do you guys have any idea how I can fine-tune the script below so that it works better in chrome?
Also, I tried the same principles of the script on a much smaller level to prevent confusion or cnflict for chrome and that one works fine, but when I make those same changes for this script, it does not change anything:

Here is the webkit CSS code that works fine in Safari, but not in Chrome:

body {
	background: #000;
	overflow: hidden;
	-webkit-animation-name: pulse;
	-webkit-animation-duration: 30s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

@-webkit-keyframes pulse {
	from {
		background: #000;
	}
	25% {
		background-color: #003;
	}
	50% {
		background-color: #030;
	}
	to {
		background: #000;
	}
}

p {
	z-index: 0;
	color: rgba(0, 0, 0, 0);
}

#fog,
#fog-2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 2000px;
	height: 2000px;
	margin-top: -1000px;
	margin-left: -1000px;
	opacity: .5;
	background: url(../img/fog.png) repeat-x 0 center;
	-webkit-animation-name: fogAnimation;
	-webkit-animation-duration: 30s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

#fog-2 {
	opacity: 1;
	-webkit-animation-duration: 120s;
}

@-webkit-keyframes fogAnimation {
	from {
		-webkit-transform: rotate(0deg);
		background-position: 0 center;
	}
	to {
		-webkit-transform: rotate(360deg);
		background-position: 1000px center;
	}
}

#glow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 800px;
	height: 800px;
	margin: -400px 0 0 -400px;
	background: url(../img/glow.png) repeat-x 0 0;
	-webkit-animation-name: glowAnimation;
	-webkit-animation-duration: 5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

@-webkit-keyframes glowAnimation {
	from {
		opacity: 1;
	}
	50% {
		opacity: .75;
	}
	to {
		opacity: 1;
	}
}

#light {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 800px;
	height: 800px;
	margin: -400px 0 0 -400px;
	background: url(../img/light.png) no-repeat center center;
	-webkit-animation-name: lightAnimation;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

@-webkit-keyframes lightAnimation {
	from {
		opacity: .25;
	}
	50% {
		opacity: .5;
	}
	to {
		opacity: .25;
	}
}

#stars,
#stars-2,
#small-stars,
#small-stars-2 {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 600px;
	height: 600px;
	margin: -300px 0 0 -300px;
	background: url(../img/stars-large.png) no-repeat center center;
	-webkit-animation-name: starsLarge;
	-webkit-animation-duration: 60s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

@-webkit-keyframes starsLarge {
	from {
		-webkit-transform: rotate(0deg) scale(3);
		opacity: .1;
	}
	to {
		-webkit-transform: rotate(360deg) scale(.5);
		opacity: 0;
	}
}

#stars-2 {
	-webkit-animation-name: starsLargeAlt;
	-webkit-animation-duration: 45s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

@-webkit-keyframes starsLargeAlt {
	from {
		-webkit-transform: rotate(180deg) scale(3);
		opacity: .25;
	}
	to {
		-webkit-transform: rotate(360deg) scale(.5);
		opacity: 0;
	}
}

#small-stars,
#small-stars-2 {
	background: url(../img/stars-small.png) no-repeat center center;
	-webkit-animation-duration: 15s;
	-webkit-animation-name: starsSmall;
}

#small-stars-2 {
	-webkit-animation-name: starsSmallAlt;
	-webkit-animation-duration: 30s;
}

@-webkit-keyframes starsSmall {
	from {
		-webkit-transform: rotate(360deg) scale(3);
		opacity: .25;
	}
	to {
		-webkit-transform: rotate(0deg) scale(.5);
		opacity: 0;
	}
}

@-webkit-keyframes starsSmallAlt {
	from {
		-webkit-transform: rotate(0deg) scale(3);
		opacity: .1;
	}
	to {
		-webkit-transform: rotate(360deg) scale(.5);
		opacity: 0;
	}
}

I would appreciate any help that I could get fixing this or adding to it so that it works in all webkit browsers without lagging.

Please let me know if you have any questions, comments, concerns, or solutions :slight_smile:
Thanks in Advance & Best Regards,
Team 1504

2

Do you guys have any idea how I can fine-tune the script below so that it works better in chrome?

Hi,
This really sounds like a question that should be presented to the webkit development team. I also see this in the same light as trying to fix a bug in a beta version browser, no point in wasting your time as things will likely change with the final version.

CSS3 Animations are still in the development stages requiring vendor-specific properties to even test them (I think Opera works without vendor extensions on a few of the properties) . The whole purpose of the working draft is to help create the final Candidate Recommendation, which will likely still be years away.

I just don’t see anything to suggest to you to help chrome work better. It’s like asking a car manufacturer to fix the sticking gas pedal on a car that they are still designing. They would say “Why are you concerned about that, that problem belongs to our engineering department for now”. :slight_smile:

3

yes you are right. I guess because my code does work on a smaller scale it is probably something with webkit itself. And I should also wait until css3 animations are developed and supported.