{N}では、イメージのbackgroundPositionをアニメーションできますか？

Question

{N}では、イメージのbackgroundPositionをアニメーションできますか？

答えはノーと思う。

この場合、誰でもsetInterval()などを使用してアニメーションを試してみてください。それはうまくいくでしょうか？

Answer 1

これを試しましたか？

.thing{ 
    display:block; 
    height:300px; 
    width:300px; 
    background:url('http://4.bp.blogspot.com/-WeXXx2gmVlY/VNiy484uYoI/AAAAAAAAAsU/XeTgzY9k-Us/s1600/Gambar-Keren-Unik-DP-BBM-Terbaru9.jpg') no-repeat; 
    background-position:-300px; 
    border:1px solid grey; 
    -webkit-transition:background-position 1s ease; 
} 

.thing:hover{ 
    background-position:0px; 
    color:red; 
} 

http://jsfiddle.net/hfXSs/882/ あなたは、あなたがこれを行うことができ、よりspesific

Answer 2

{N} + Angular2する必要があります：HTMLで

：

CSSで

<StackLayout class="bg" [style]="'background-position:'+translateValue+' 
'+translateValue+';'"> 
    <Label [text]="translateValue"></Label> 
<StackLayout> 

：

.bg { 
    background-image: url("res://bg"); 
    background-size: cover; 
    background-repeat: repeat; 
} 

を

いくつかのin.component：

export class SomeComponent implements OnInit { 
    public translateValue:number = 0; 
    constructor() { 
     setInterval(()=>{ 
     this.translateValue++; 
     },50); 
    } 
} 

これは良い解決策ではありませんが、それは動作します。