[Html5]關於動畫製作

[Html5]關於動畫製作

來自專欄 SecLabhtml5動畫製作主要通過css，使用js也可以，比如說

div.style.top = div.style.top = 1 + "px"；

如果你真的這麼干過就會發現卡頓很嚴重，所以還是老實學css3動畫的好。

1.偽類標籤

.div:hover{}

這就是一個偽類。

目前偽類一共就這麼多，偽類可以用作響應式動畫設計（摘自W3C ）

屬性描述CSS:active 向被激活的元素添加樣式。1:focus 向擁有鍵盤輸入焦點的元素添加樣式。2:hover 當滑鼠懸浮在元素上方時，向元素添加樣式。1:link 向未被訪問的鏈接添加樣式。1:visited 向已被訪問的鏈接添加樣式。1:first-child 向元素的第一個子元素添加樣式。2:lang 向帶有指定 lang 屬性的元素添加樣式。2

2.怎麼做動畫

其實和flash一樣，指定動畫名和關鍵幀：

animation: 2s linear 2s noraml none；animation-name：myani

如果使用多個動畫，加逗號即可。其中myani是指定要播放的動畫，需要手動創建。

@keyframes myani { 0%{ opacity: 0; transform:translate(0px,0px); } 50%{ opacity: 0.3; transform:translate(0px,2px); } 100%{ opacity: 0.4; transform:translate(0px,0px); }}

註：最好添加-moz-,-webkit滿足兼容性

3.播放transfrom動畫導致模糊

產生的原因基本都是因為用了scale，同時沒注意content-view的設置、

原則是：如果圖片被縮小了，那麼就會出現模糊。

所以放大圖片再減小縮放是不會的。

4.3d翻轉

有時候rotateY，X，Z會不支持，這種情況下應該使用Scale(-1,1) - > Scale（1,1）

但是必須注意不能直接一步到位，必須這麼做。

@keyframes myani { 0%{ opacity: 0; transform:scale(-1,1); } 50%{ opacity: 0.3; transform:scale(0,1); } 100%{ opacity: 0.4; transform:scale(1,1) }}

不然可能會出現奇蹟

5.swiper

swiper應該是最好的翻頁工具，推薦使用，如果需要響應去查查api。

推薦閱讀：