バウンスアニメーションが動作しません

Question

画像が入っている<div>をバウンスしようとしていますが、うまく動作せず、理由がわかりません。

これは私のコードです：

@keyframes bounce 
{ 
    from { 
     left: 0px; 
    } 
    to { 
     right: 30px; 
    } 
} 

@-moz-keyframes bounce /* Firefox */ 
{ 
    from { 
     left: 0px; 
    } 
    to { 
     right: 30px; 
    } 
} 

@-webkit-keyframes bounce /* Safari and Chrome */ 
{ 
    from { 
     left: 0px; 
    } 
    to { 
     right: 30px; 
    } 
} 

#DanielFace 
{ 
    background-repeat: no-repeat; 
    width: 145px; 
    height: 165px; 
    background-image: url(../images/daniel/fun.png); 
    animation: bounce 1s; 
    -moz-animation: bounce 1s; /* Firefox */ 
    -webkit-animation: bounce 1s; /* Safari and Chrome */ 
} 

Answer 1

これは2つの理由によるものです。

最初にleftとrightは、そのCSSが与えられたオブジェクトでは何も行いません。これらの値は、要素のpositionがstatic（デフォルト）以外の場合にのみ適用されます。

第2に、それらは競合する値なので、探しているアニメーション効果は得られません。今あなたが言っていることは、基本的にはこの要素を伸ばしていることです。イメージがあなたのページで正確に何をしたいですか？

Answer 2

あなたは二つの異なる性質、rightとleftを使用しているある理由。どちらのポジションでも、同じプロパティを使用してトランジションを実行する必要があります。コンテナの幅が固定幅の場合、単純です。 rightの代わりにleftを使用するか、逆の場合はfromとtoの両方に使用してください。

一方、幅が動的である場合、あなたは不運です。代わりにJavaScriptを使用してください。