「左」属性アニメーションを変更する代わりに、css3 変換アニメーションで固定背景アタッチメントを使用するにはどうすればよいですか?
ここで固定の背景アタッチメントを使用したい
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/ayumitskij/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;}
}