CSS3 之動畫及兼容性調優

============================================================================

本文由 www.webfunny.cn 前端監控提供；只需要簡單幾步就可以搭建一套屬於自己的前端監控系統，快來試試吧 ^ _ ^。

============================================================================

　　由於CSS3動畫對低版本的瀏覽器的支持效果並不是很好，特別是IE9及以下版本，更是無法支持。 所以有時候一些簡單的動畫效果，還只是用js代碼來實現，但是效率偏低，而且效果有些偏生硬，不夠順滑。 畢竟用js代碼來實現動畫並非正確之道。

　　雖說css實現動畫效果看起來更順滑一些，但是也只是相對而言，因為css3動畫的也是一幀一幀的執行，由於多種因素的影響，細看之下也未必是真的順滑，所以只要把動畫設計讓眼睛感覺到是順滑的就能達到完美的效果。

　　在css3中，我們可以通過@keyframes創建關鍵幀動畫效果。我們需要將@keyframes綁定到選擇器中，否則不會有效果出現。同時，我們還需定義動畫時長和動畫名稱

　　語法(@keyframes)：

@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需，定義動畫的名稱
keyframes-selector	必需，動畫運行過程中的百分比

在css3中，我們以百分比來規定改變發生的時間，或者通過關鍵詞 "from" 和 "to"，等價於 0% 和 100%。其中，0% 是動畫的開始時間，100% 動畫的結束時間。

百分比分可以分解成無限多個，分解的越多，軌跡越復雜，達到的效果越好，這個需要在設計的時候細細琢磨

@keyframes myfirst

{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */ { from {background: red;} to {background: yellow;} } @-o-keyframes myfirst /* Opera */ { from {background: red;} to {background: yellow;} }

//或者用（%） 來指定運行過程中的行為

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */ { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } @-o-keyframes myfirst /* Opera */ { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} }

 

 　　語法(animation)

　　animation 屬性是一個簡寫屬性，用於設置動畫的屬性：

　　根據以上各種屬性來設置動畫在運行過程的各種狀態來達到想要的效果。

代碼示例：

運行名為 myfirst 的動畫，其中設置了所有動畫屬性：
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari 和 Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera: */
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}

與上面的動畫相同，但是使用了簡寫的動畫 animation 屬性：（二者用其一即可）
div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}

動畫效果雖然創建出來了，但是還需要配合js代碼才能在合適的時機執行動畫效果

調用動畫的方式有兩種： 

//方式一，給元素style的WebkitAnimation 、animation 添加行為

var x = document.getElementById("myDIV");
// 使用 JavaScript 開始動畫
function myFunction() {
    x.style.WebkitAnimation = "myfirst 5s linear 2s infinite alternate"; 
　　// Chrome, Safari 和 Opera 代碼 
　　x.style.animation = "myfirst 5s linear 2s infinite alternate"; 
}

//方式二， 給元素添加上包含動畫的類名（class) ，在動畫結束是remove掉。

 //為動畫監聽結束事件 ＊＊＊ 這里有一個比較嚴重的問題， 在我們用的時候， 有可能會多次執行下邊的代碼，就是為  //元素重復綁定監聽事件，會導致動畫出現卡頓現象，一定要避免

if(x){
    x.addEventListener("webkitAnimationEnd", function(){ //動畫結束時事件
         eListenerEnd(bgflag,bgflag2);
    }, false);
    x.addEventListener("animationend", function(){ //動畫結束時事件
         eListenerEnd(bgflag,bgflag2);
    }, false);
}

兼容性問題一

 動畫執行的很漂亮，但是在Safari中表現的極為差勁， 在蘋果的系統上9.0版本以上的Safari表現正常，但是8.0及以下的版本，動畫連動都不動，樣式錯亂，各種猜測，方法各種試，各種搜索，都不盡如人意，實在頭大，最后不得不用排除法找到問題的所在

代碼如斯：

.slide-mask2{
    animation-name: myfirst;
    animation-duration: 0.65s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
    animation-fill-mode: forwards;
}
@keyframes myfirst
{
    0%   {left:0px; top:0%;height: 0%;}
    40%  {left:0px; top:-15%; height: 85%;}
    60%  {left:0px; top:20%; height: 70%;}
    100% {left:0px; top:100%; height: 0%;}
}
@-moz-keyframes myfirst /* Firefox */
{
    0%   {left:0px; top:0%;height: 0%;}
    40%  {left:0px; top:-15%; height: 85%;}
    60%  {left:0px; top:20%; height: 70%;}
    100% {left:0px; top:100%; height: 0%;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
    0%   {left:0px; top:0%;height: 0%;}
    40%  {left:0px; top:-15%; height: 85%;}
    60%  {left:0px; top:20%; height: 70%;}
    100% {left:0px; top:100%; height: 0%;}
}

@-o-keyframes myfirst /* Opera */
{
    0%   {left:0px; top:0%;height: 0%;}
    40%  {left:0px; top:-15%; height: 85%;}
    60%  {left:0px; top:20%; height: 70%;}
    100% {left:0px; top:100%; height: 0%;}
}

修改如斯：

.slide-mask2{
    animation: myfirst 0.65s linear 0s 1 normal forwards;
    -moz-animation: myfirst 0.65s linear 0s 1 normal forwards;    /* Firefox */
    -webkit-animation: myfirst 0.65s linear 0s 1 normal forwards;    /* Safari 和 Chrome */
    -o-animation: myfirst 0.65s linear 0s 1 normal forwards;    /* Opera */
}
@keyframes myfirst
{
    0%   {left:0px; top:0%;height: 0%;}
    40%  {left:0px; top:-15%; height: 85%;}
    60%  {left:0px; top:20%; height: 70%;}
    100% {left:0px; top:100%; height: 0%;}
}
@-moz-keyframes myfirst /* Firefox */
{
    0%   {left:0px; top:0%;height: 0%;}
    40%  {left:0px; top:-15%; height: 85%;}
    60%  {left:0px; top:20%; height: 70%;}
    100% {left:0px; top:100%; height: 0%;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
    0%   {left:0px; top:0%;height: 0%;}
    40%  {left:0px; top:-15%; height: 85%;}
    60%  {left:0px; top:20%; height: 70%;}
    100% {left:0px; top:100%; height: 0%;}
}

@-o-keyframes myfirst /* Opera */
{
    0%   {left:0px; top:0%;height: 0%;}
    40%  {left:0px; top:-15%; height: 85%;}
    60%  {left:0px; top:20%; height: 70%;}
    100% {left:0px; top:100%; height: 0%;}
}

原因總結： 樣式中的行為，要包含兼容各種瀏覽器的行為， keyframes中也要設置兼容瀏覽器的行為， 最后， 8.0及以下版本的Safari不支持 animation-play-state: running; 具體原因我不能描述清楚，至此，此兼容性問題解決。

ps: 雖然動畫執行了，但是在windows系統下的Safari瀏覽器中，動畫執行的效果出現卡頓現象， 在ios系統下則很順暢，所以我以為這是windows系統下Safari瀏覽器的問題，所以並不再繼續做處理。

 

js如何動態生成動畫的樣式呢

參考文章：js 動態添加、修改css3 @keyframes

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

參考鏈接： W3School之css動畫教程