我們可以通過不同的動畫對元素進行多重轉換嗎？

在CSS中，在一個規則中對同一元素應用多個轉換，它必須寫成這樣： .selector{ transform:translateY(*value*) scale(*value*) rotateZ(*value*)等等。但是，如何在多個動畫中添加多個轉換？例如：我們可以通過不同的動畫對元素進行多重轉換嗎？

@import 'https://necolas.github.io/normalize.css/latest/normalize.css'; 
 
/* //////////////////////////////// INITIAL //////////////////////////////// */ 
 
html, body{ height:100% } body{ background:#eee } 
 
#btnCont{ 
 
    display:block; width:100px; height:100px; margin:0 auto; position:relative; 
 
    transform:translateY(-50%); top:50%; perspective:1000px 
 
} 
 
#btn { 
 
    width:100%; height:100%; background:#333; color:#eee; border:0; outline:0; 
 
    text-transform:uppercase; transform:rotateX(93deg) translateX(0); 
 
    transform-origin:bottom 
 
} 
 
/* //////////////////////////////// __ANIM_ //////////////////////////////// */ 
 
.rotUp{ 
 
    animation-name:rotateUp; animation-duration:1s; animation-fill-mode:forwards 
 
} 
 
.movUp{ 
 
    animation-name:moveUp; animation-duration:1.5s; animation-fill-mode:forwards 
 
} 
 
@keyframes rotateUp{ 
 
    0%{ transform:rotateX(93deg) } 
 
    100%{ transform:rotateX(0deg) } 
 
} 
 
@keyframes moveUp{ 
 
    0%{ transform:translateX(0) } 
 
    100%{ transform:translateX(95px) } 
 
}

<div id="btnCont"> <button id="btn" class="rotUp movUp">button</button> </div>

欲同時執行rotateUp和moveUp。現在，rotateUp完全被忽略。

來源

2016-07-15 sol acyon

的可能的複製[能否動畫分別使用關鍵幀動畫多個CSS轉換屬性（http://stackoverflow.com/questions/13579730/can-i -animate-多CSS變換 - 屬性 - 分別-使用-關鍵幀阿尼馬特） –

變換可以同時採用多個規則/值。您可以混合這些值並根據需要添加儘可能多的步驟。

Basicly：

@import 'https://necolas.github.io/normalize.css/latest/normalize.css'; 
 
/* //////////////////////////////// INITIAL //////////////////////////////// */ 
 
html, body{ height:100% } body{ background:#eee } 
 
#btnCont{ 
 
    display:block; width:100px; height:100px; margin:0 auto; position:relative; 
 
    transform:translateY(-50%); top:50%; perspective:1000px 
 
} 
 
#btn { 
 
    width:100%; height:100%; background:#333; color:#eee; border:0; outline:0; 
 
    text-transform:uppercase; transform:rotateX(93deg) translateX(0); 
 
    transform-origin:bottom 
 
} 
 
/* //////////////////////////////// __ANIM_ //////////////////////////////// */ 
 
.rotUp.movUp{ 
 
    animation-name:anim; animation-duration:1.5s; animation-fill-mode:forwards 
 
} 
 
@keyframes anim{ 
 
    0%{ transform:rotateX(93deg) translateX(0) } 
 
    75%{ transform:rotateX(25deg) translateX(90px) } 
 
    100%{ transform:rotateX(0deg) translateX(95px) } 
 
}

<div id="btnCont"> <button id="btn" class="rotUp movUp">button</button> </div>

來源

2016-07-15 21:16:00

動畫本質上是將樣式應用到元素，就像JS將樣式直接應用到節點一樣。

因此，當您應用單個動畫時，它將以與直接將樣式應用於具有style屬性的元素優先於樣式表的方式相同的方式覆蓋樣式表。

當您應用兩個動畫時，第二個動畫會覆蓋第一個動畫，因爲您只能有一個獲勝樣式定義。這也是爲什麼你沒有得到既是X，當你這樣定義

@keyframes changeStuff{ 
    0%{ transform:rotateX(90deg) } 
    100%{ transform:rotateY(90deg) } 
}

動畫Ÿ變換（變換100％覆蓋變換爲0％）。

所以你的問題的解決方案是寫一個動畫.rotUp.movUp。

來源

2016-07-15 21:14:44 AJFarkas

我們可以通過不同的動畫對元素進行多重轉換嗎？

回答

相關問題