CSS3アニメーション：0％キーフレームのプロパティを継承

Question

I問題を以下た： Iキーフレームルール（@keyframes MYNAME {}）とCSS3アニメーションを使用する

問題は、私がルールSINGLEを使用します複数の要素のキーフレームアニメーションですが、これらの要素の位置はそれぞれ異なります。したがって、@keyframesアニメーションはセレクタの元のプロパティを0％（または{}）ルールで継承する必要があるため、アニメーションはセレクタの元の位置とサイズから発生します。

@keyframes myanim { 
    0% { 
    left: inherit; 
    top: inherit; 
width:inherit; 
height:inherit; 
    } 

    100% { 
top: 50%; 
left:50%; 
    width: 100%; 
    height: 60%; 
    } 
} 

セレクタ：

.myselector-one { 
top:10em; 
left:0em; 
width:10em; 
height:5em; 
animation: myanim 1s; 
} 
.myselector-two { 
top:20em; 
left:30em; 
width: 15em; 
height: 8em; 
animation: myanim 1s; 
} 

目標は、各セレクタのオリジナルのプロパティを取得元の位置とサイズを0％のキーフレームにそれらを入れて、100にアニメーション化することである。このような

すべてのセレクタで同じプロパティを持つ％。

これは可能ですか、各セレクタのアニメーションを作成する必要がありますか？問題は、それが動的に計算されるようになると私は彼らの立場を知らないだろうということです。

jQueryソリューションはありません。純粋なCSS3です。私はjQueryアニメーションメソッドを使用したくありません。

Answer 1

ええと、私はこの問題をちょっと調べており、CSSアニメーションを使用することはできないと思います。私はthis JSFiddleと多くの異なるものを試していて、through tutorialsabout CSS Animations（誰もが同じ問題を言及しているのを見てください）とother informationabout itを実行しています。

私はあなたが達成しようとしていることを実現するために来ましたが、おそらく簡単な解決策があると思います。場所が動的に計算されている場合は、私はあなたが実際にいくつかのレベルのJavascript（またはいくつかの狂気の高度なCSS calcメソッド）を使用していると思いますので、DOMエレメントのスタイルを新しいleftまたはtopポジション。私がjQueryアニメーションについて話しているわけではありませんが、あなたは代わりにCSS3 TransitionsをJavascriptと組み合わせて使用​​することができます。これは、CSSアニメーションの利点のいくつかを得ることを意味します.Javascriptで行われるのではなく、ネイティブ（ハードウェアアクセラレーション）であるような計算ですが、あなたはいくつかのことを忘れてしまいます。

最も重要なことは、ブラウザlike there is for CSS Animationsの遷移イベントはなく、キーフレームの細かい制御もできませんが、動的に操作することは可能です。あなたの質問は0%と100%のいずれかのキーフレームのみを参照するので、私はそれを提案します。

あなたがやっていた問題は、CSSアニメーションを使用することが静的である必要があり、アニメーションを行うために現在設定されている値（プルダウンとは異なります）をプルしないことです。 inheritを使用している場合は、実際にはtopとleftなどfrom it's parentを使用しようとしています。

また、これは純粋なCSSの要件を満たしていませんが、CSSトランジションを使用すると、jQueryのアニメーションではなく、JavaScriptによるDOM操作が制限されます。

another JSFiddleはjQuery（クラスまたはインラインスタイルを設定するための非常に基本的なJavaScriptのみ）とCSSトランジションを使用しています。

HTML

<div class="myselector-one" id="a">Click Me</div> 
<div class="myselector-two" id="b">Click Me</div> 

Javascriptを

document.getElementById("a").onclick = function() 
{ 
    if (this.className.indexOf("animate-complete")!=-1) 
    { 
     this.className = this.className.replace(/animate\-complete/g,""); 
    } 
    else 
    { 
     this.className += " animate-complete"; 
    } 
} 
var bIsTransitioned = false; 
document.getElementById("b").onclick = function() 
{ 
    if (!bIsTransitioned) 
    { 
     this.style.top = "50%"; 
     this.style.left = "50%"; 
     this.style.width = "100%"; 
     this.style.height = "60%"; 
    } 
    else 
    { 
     this.style.top = ""; 
     this.style.left = ""; 
     this.style.width = ""; 
     this.style.height = "";   
    } 
    bIsTransitioned = !bIsTransitioned; 
} 

CSS

.myselector-one { 
    top:10em; 
    left:0em; 
    width:10em; 
    height:5em; 
    transition:all 2s; 
    background-color:#ffaa99; 
    position:absolute; 
} 
.myselector-two { 
    top:4em; 
    left:30em; 
    width: 15em; 
    height: 8em; 
    transition:all 2s; 
    background-color:#aaff99; 
    position:absolute; 
} 
.animate-complete 
{ 
    top: 50%; 
    left:50%; 
    width: 100%; 
    height: 60%; 
}