[webkit-dev] Could someone help me get this webkit code to be less laggy in Chrome?

Sat Nov 20 12:32:31 PST 2010

Hi Guys,
                this is  a script I found that I was trying to develop and
also fine tune so that it could work in better in Chrome. Here is the live
version, http://media.24ways.org/2009/15/space.html, by the original author
and then below is the code that I have been trying to change, but it is
still lagging in Chrome.

I was wondering if anyone could help me fix it if it is possible, to get
this working fluently in both Chrome and Safari.

I would appreciate any help very much.

Thanks in Advance and Best Regards,

theirf at gmail.com

The HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>24ways - CSS Animations - Space working only in safari</title>
<link id="lnkCss" rel="stylesheet" type="text/css"
href="assets/css/space.css">
</head>
<body>
<h1>Space</h1>
<nav>
<ul>
<li id="back"><a href="http://24ways.org/200915">Back to article</a></li>
<li id="source"><a href="assets/css/space.css">View CSS</a></li>
</ul>
</nav>
<p>
<span id="fog">A long</span>
<span id="fog-2">long time</span>
<span id="glow">ago,</span>
<span id="light">in a</span>
<span id="stars">galaxy</span>
<span id="stars-2">far</span>
<span id="small-stars">far</span>
<span id="small-stars-2">away&hellip;</span>
</p>
<!-- Excuse the markup please -->
</body>
</html>

The CSS:
@import url(http://media.24ways.org/2009/15/assets/css/master.css);

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(../images/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(../images/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(../images/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(../images/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(../images/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;
}
}

Regards,
              Irfan Mir.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-dev/attachments/20101120/45694962/attachment.html>