css3 - -webkit-transform with two background layers? -


i have animation div 2 semi-transparent backgrounds:

/* animated background div. */ @-webkit-keyframes wind /*keyframes*/ {     0%     {         background-position: 0px 0px, 0px 0px;     }     100%     {         background-position: 370px 370px, 424px 242px;     } } 

have noticed comma? it's because use

#animatedbkg {     background-image: url('1.png'), url('2.png'); } 

both files contain alpha channel.

now, want accelerate code on iphone. so, i've replaced cpu loader background-position -webkit-transform: translate():

/* animated background div. */ @-webkit-keyframes wind /*keyframes*/ {     0%     {         -webkit-transform: translate(0px, 0px), translate(0px, 0px);     }     100%     {         -webkit-transform: translate(370px, 370px), translate(424px, 242px);     } } 

it doesn't work @ all. if remove comma, both bkg layers moving synchronously (it seems first translate() works), much smoother. actually, speed difference huge can't return background-image.

are there other options except making 2 divs: #animatedbkg1 , #animatedbkg2?

regards,

well, since translating moving object, , background-position an object property, looks 2 divs required. means #animatedbkg1 , #animatedbkg2.


Comments

Popular posts from this blog

java - Play! framework 2.0: How to display multiple image? -

gmail - Is there any documentation for read-only access to the Google Contacts API? -

php - Controller/JToolBar not working in Joomla 2.5 -