CSS：動畫與轉換

103

所以，我明白如何執行CSS3轉換和動畫。什麼是不明確的，我已經GOOGLE了，是什麼時候使用哪個。CSS：動畫與轉換

例如，如果我想使球彈跳，很明顯動畫是要走的路。我可以提供關鍵幀，瀏覽器會做中間幀，我會有一個很好的動畫。

但是，有時可以實現上述效果。一個簡單而常見的例子就是實現Facebook風格的滑動抽屜菜單：

這個效果可以通過轉換來實現，像這樣：

.sf-page { 
    -webkit-transition: -webkit-transform .2s ease-out; 
} 

.sf-page.out { 
    -webkit-transform: translateX(240px); 
}

http://jsfiddle.net/NwEGz/

或者，通過動畫像這樣：

.sf-page { 
    -webkit-animation-duration: .4s; 
    -webkit-transition-timing-function: ease-out; 
} 

.sf-page.in { 
    -webkit-animation-name: sf-slidein; 
    -webkit-transform: translate3d(0, 0, 0); 
} 

.sf-page.out { 
    -webkit-animation-name: sf-slideout; 
    -webkit-transform: translateX(240px); 
} 

@-webkit-keyframes sf-slideout { 
    from { -webkit-transform: translate3d(0, 0, 0); } 
    to { -webkit-transform: translate3d(240px, 0, 0); } 
} 

@-webkit-keyframes sf-slidein { 
    from { -webkit-transform: translate3d(240px, 0, 0); } 
    to { -webkit-transform: translate3d(0, 0, 0); } 
}

http://jsfiddle.net/4Z5Mr/

隨着HTML，看起來像這樣：

<div class="sf-container"> 
    <div class="sf-page in" id="content-container"> 
     <button type="button">Click Me</button> 
    </div> 
    <div class="sf-drawer"> 
    </div> 
</div>

而且，這種伴隨的jQuery腳本：

$("#content-container").click(function(){ 
    $("#content-container").toggleClass("out"); 
    // below is only required for css animation route 
    $("#content-container").toggleClass("in"); 
});

我想什麼，瞭解什麼是職業玩家這些方法的利弊。

一個明顯的區別是，動畫製作需要更多的代碼。
動畫給予更好的靈活性。我可以有不同的動畫滑出，並在
有什麼可以說的表現。兩者都利用h/w加速度嗎？
哪個更現代化，如何前進
還有什麼可以補充的嗎？除非您使用的是相同的過渡一遍又一遍，在這種情況下，動畫效果會更好

來源

2013-12-14 Code Poet

145

看起來你應該使用過渡的例子」我們已經掌握瞭如何去做，而不是什麼時候去做。

過渡是動畫，只有一個即兩個不同的狀態之間進行 - 即開始狀態和結束狀態。像抽屜菜單一樣，開始狀態可以打開，結束狀態可以關閉，反之亦然。

如果你要執行的東西，不具體包括開始狀態和結束狀態，或者你需要在一個過渡的關鍵幀更細粒度的控制，那麼你必須使用動畫。

來源

2013-12-15 01:41:41 Adam

完美清晰的解釋 –

也看看這篇文章http://www.kirupa.com/html5/css3_animations_vs_transitions.htm，它正確地指出，轉換是做JavaScript的交互時要走的路。 –

清楚的解釋謝謝 – Student22

動畫需要更多的代碼。
您可以在沒有動畫的情況下滑入和滑出不同的效果。只需對原有的規則和修改後的規則都不同的過渡：
```
.two-transitions { 
    transition: all 50ms linear; 
} 

.two-transitions:hover { 
    transition: all 800ms ease-out; 
} 
```
動畫只是過渡的抽象，因此，如果過渡是硬件加速，動畫會。沒什麼區別。
兩者都非常現代。
我的經驗法則是，如果我使用三次相同的轉換，它應該可能是一個動畫。這在未來更容易維護和改變。但是，如果您只使用過一次，那麼製作動畫的輸入會更多，也許不值得。

來源

2013-12-14 19:42:50 paulcpederson

我還應該補充說，動畫有關鍵幀，可以讓你做非常複雜和可控的進程，這真是太神奇了。 – paulcpederson

我會讓定義爲自己說話（根據韋氏）：

過渡：一個運動，發展，演變或從一種形式，階段，或者樣式另一個

動畫：賦予生命或生命的品質;充滿運動

名稱適當地滿足他們的目的在CSS

所以，你給了，因爲它只是從一個狀態變化到另一個

來源

2013-12-15 01:36:27

動畫就是這樣 - 一組屬性的平滑行爲。換句話說，它指定什麼應該發生在一組元素的屬性上。您定義了一個動畫並描述了這組屬性在動畫過程中的行爲方式。

轉換在另一邊指定如何屬性（或屬性）應該執行其更改。每個變化。爲某個屬性設置一個新的值，不管是JavaScript還是CSS，總是一個轉換，但默認情況下它不是平滑的。通過在css樣式中設置transition，您可以定義不同（平滑）的方式來執行這些更改。

可以說是過渡定義默認動畫應每隔指定的屬性發生了變化時進行。

來源

2014-03-11 21:23:03

我不同意這個定義，因爲它們都指定* how *和* what * –

我相信CSS3 animation vs CSS3 transition會給你你想要的答案。基本上低於

一些外賣：

如果性能是一個問題，然後選擇CSS3過渡。
如果在每次轉換之後要維護狀態，則選擇CSS3轉換。
如果需要重複動畫，請選擇CSS3動畫。因爲它支持動畫迭代計數。
如果需要複雜的動畫。然後CSS3動畫是首選。

來源

2015-06-17 15:35:24 PixelsTech

＃2和＃3不是真的 –

我不知道＃3是不是真的？這似乎是一個合理的考慮點，並且動畫迭代計數似乎是一個有效的屬性：https：//developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count – ibgib

CSS：動畫與轉換

回答

相關問題