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
Post a Comment