使用css3翻译动画并没有真正修复background-attachment

时间:2014-04-10 06:53:11

标签: css3 css-animations background-attachment

如何使用固定背景附件与css3翻译动画而不是更改" left"属性动画?
我想在这里使用固定的背景附件

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/
喜欢这里

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/

0 个答案:

没有答案