CSS3動畫：在0％繼承財產的關鍵幀

Question

我有以下問題： 我想使用關鍵幀規則CSS3動畫（@keyframes MYNAME {}）

問題是，我想在規則來使用單多個元素的關鍵幀動畫，但這些元素每個都有不同的位置。因此，@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計算方法），所以我至少會認爲你會設置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 Transitions的意思只是通過Javascript來限制DOM操作，而不是jQuery動畫所做的。

這裏是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%; 
}