簡單了解css3動畫與js動畫

2021-09-26 08:21:05 字數 597 閱讀 4353

相容性

css3

相容性不好,ie10才開始支援。

js相容性好,甚至可以相容ie6。

效能

css3

在效能上會稍微好一些,瀏覽器會對css3的動畫做一些優化(新建圖層來跑動畫)。

移動端的開發也有這種hack,開啟硬體加速,來解決可能的卡頓問題:

css-webkit-transform: translate3d(0, 0, 0);

js在現代瀏覽器中效能的差異可以忽略,但是對於幀速表現不好的低版本瀏覽器,css3可以做到自然降級,而js則需要撰寫額外**。

複雜度

css3

**相對簡單,但是也意味著在動畫的控制上不夠靈活。部分動畫效果不能實現。css動畫有天然事件支援(transitionend、animationend)。

js**複雜,需要自己寫事件,通常需要引入庫來減少工作量。粒度控制很細,可以單幀的控制、變換,寫出複雜的動畫。

結論:在有相容性要求或者有複雜控制的動畫的情況下可以使用js動畫,其他情況就使用css3動畫。

css3動畫和js動畫

css3動畫 animation 是個簡寫屬性,用於設定六個動畫屬性。注意必須規定animation duration屬性,否則時長為0 animation timing function規定動畫速度曲線 alternate 動畫應該輪流反向 transtion 過度屬性 預設 all 0 ease...

CSS3簡單動畫

css3的動畫確實非常絢麗!瀏覽器相容性很重要!分享兩個小動畫 doctype html html lang en head meta charset utf 8 meta name generator content editplus meta name author content meta n...

CSS3過渡與動畫

規定過渡效果的 css 屬性名 webkit transition property none all property moz transition property none all property ms transition property none all property o tran...