css3的幀動畫

概述

前幾天剛好看到一個用了CSS3幀動畫的頁面，對它非常感興趣，就研究了一下，記錄在下面，供以后開發時參考，相信對其他人也有用。

PS：以后別人問我用過什么CSS3屬性的時候，我也可以不用說常見的animation，transform這些了，我可以說幀動畫這個高大上的術語了哈哈。

本篇文章參考了：CSS3 animation的steps方式過渡，CSS遮罩mask。

幀動畫

幀動畫其實就是CSS3中animation中的steps。它能夠把靜態圖片處理為動態圖片。原理是不斷地切換圖片，從而讓圖片“動”起來。

下面我通過2個示例來進行說明。

兔斯基

你可以從我的博客左上方的公告下面那個會動的兔斯基看到這個示例。(暫不支持移動端)(這個兔斯基不是gif！！！)

它的代碼如下：

/* 兔斯基幀動畫 */
@-webkit-keyframes rabbit {
  0% {background-position:0px -0%;}
  100% {background-position:0px -400%;}
}
@keyframes rabbit {
  0% {background-position:0px -0%;}
  100% {background-position:0px -400%;}
}
div.myRabbit {
  height:35px;width:32px;
  -webkit-animation:rabbit 400ms steps(4) infinite;
  animation:rabbit 400ms steps(4) infinite;
  background:url(http://images.cnblogs.com/cnblogs_com/yangzhou33/1158868/o_%e5%85%94%e6%96%af%e5%9f%ba%e6%8f%89%e8%84%b8.png);
}

其中rabbit是一個動畫，整個過程和一般的animation定義動畫沒什么區別，除了animation里面用了一個steps(4)，它的意思是把動畫0%-100%這個過程分為4段來播放。

有以下三點需要說明：

1. 本來這個用steps(4)的地方是用linear的，linear表示整個動畫過程是平滑的，而用steps(4)表示整個動畫過程分為4幀，不是平滑的。
2. steps(4)還可以接受第二個參數，值是step-start或step-end，前者表示第一幀是從0px -0%開始的，然后逐漸遞增；后者表示第一幀是從0px -100%開始的，然后逐漸遞增。詳細的可以參考：深入理解CSS3 Animation 幀動畫。
3. steps(4)是對每一段動畫而言的，如果有一個2段的動畫，那么每一段將會分為4幀。於是我們可以把上面的代碼改為如下。（這個時候就是steps(2)了）

/* 兔斯基幀動畫 */
@-webkit-keyframes rabbit {
  0% {background-position:0px -0%;}
  50% {background-position:0px -200%;}
  100% {background-position:0px -400%;}
}
@keyframes rabbit {
  0% {background-position:0px -0%;}
  50% {background-position:0px -200%;}
  100% {background-position:0px -400%;}
}
div.myRabbit {
  height:35px;width:32px;
  -webkit-animation:rabbit 400ms steps(2) infinite;
  animation:rabbit 400ms steps(2) infinite;
  background:url(http://images.cnblogs.com/cnblogs_com/yangzhou33/1158868/o_%e5%85%94%e6%96%af%e5%9f%ba%e6%8f%89%e8%84%b8.png);
}

潑墨效果

每次打開我的博客或者打開我的博客的文章都會有一個“潑墨”的效果(暫不支持移動端)，這里也用到了幀動畫，代碼如下。

/* 潑墨幀動畫 */
@-webkit-keyframes masky {
  0% {
  mask-position: 0 0;
  -webkit-mask-position: 0 0;
  }
  100% {
    mask-position: 100% 0;
    -webkit-mask-position: 100% 0;
  }
}
@keyframes masky {
    0% {
    mask-position: 0 0;
    -webkit-mask-position: 0 0;
    }
    100% {
      mask-position: 100% 0;
      -webkit-mask-position: 100% 0;
    }
}
div#home{
    -webkit-mask: url(http://images.cnblogs.com/cnblogs_com/yangzhou33/1158868/o_masky.png);
    mask: url(http://images.cnblogs.com/cnblogs_com/yangzhou33/1158868/o_masky.png);
    -webkit-mask-size: 4000% 100%;
    mask-size: 4000% 100%;
    -webkit-animation:masky 1s steps(39) forwards;
    animation:masky 1s steps(39) forwards;
}

原理和兔斯基大致相同。但有幾點需要說明：

1. 里面用到了mask屬性，這個是css3的遮罩屬性。
2. css3的遮罩屬性mask必須寫在整個包含塊里面，比如我就寫在了home里面。不能建立一個position為absolute/fixed的遮罩層來專門放它！