0

How can I use fixed background-attachment with css3 translate animation instead of changing "left" attribute animation?
I want to use fixed background-attachment here

div
{
width:100px;
height:100px;
background:red;
position:relative;
-webkit-animation: moveToLeft 2s infinite both;
-moz-animation: moveToLeft 2s infinite both;
animation: moveToLeft 2s infinite both;
background-image: url(http://img.gawkerassets.com/img/18as01fkexzecjpg/ku-xlarge.jpg);
background-attachment: fixed;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    -o-backface-visibility:     hidden;
    backface-visibility:     hidden;
}

@-webkit-keyframes moveToLeft {
    to { -webkit-transform: translateX(180%); }
}
@-moz-keyframes moveToLeft {
    to { -moz-transform: translateX(180%); }
}
@keyframes moveToLeft {
    to { transform: translateX(180%); }
}

http://jsfiddle.net/alyumitskij/9tsBc/3/
like here

div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
    background-image: url(http://img.gawkerassets.com/img/18as01fkexzecjpg/ku-xlarge.jpg);
background-attachment: fixed;
}

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}

http://jsfiddle.net/alyumitskij/6X7mr/1/

Alexandr Lyumitskij
  • 119
  • 1
  • 11
  • do you mean the infinite move ??? It's not quite clear what you want – Karim AG Apr 10 '14 at 07:08
  • see to background in examples. 2nd case - background statics, 1st - not, and it is bug in my opinion. – Alexandr Lyumitskij Apr 10 '14 at 11:03
  • I think you mean the 2nd case with "left" isn't static, but with "translate" it's static, right ? – Karim AG Apr 10 '14 at 13:37
  • No, backwards. In "translate" case image of background is moving on the page with div contained it, but in "left" case it's stay and div is visual viewport of this image. But I want to do this effect with "translate" case. – Alexandr Lyumitskij Apr 10 '14 at 14:27

0 Answers0