CSS3 定格動畫 stop motion animation

[不惑仔]

這是一幀動畫分解動作合在一起的圖，共 6 格，每格尺寸 120 x 120 px 。

(圖片來源：david lanham beast，經過我稍稍修改。)

利用 css3 animation 技術把它變成定格動畫。圖片檔名假設為 dog2.png 。

html 片段

<section id="stop-motion-animation"><div></div></section>

css 片段

*#stop-motion-animation > div{
 width:120px;
 height:120px;
 background-image:url(dog2.png);
 background-repeat:no-repeat;
 -webkit-animation-name:ani;
 -webkit-animation-duration:0.6s;
 -webkit-animation-timing-function:steps(1);
 -webkit-animation-iteration-count:infinite;
 -webkit-animation-play-state:paused;
 animation-name:ani;
 animation-duration:0.6s;
 animation-timing-function:steps(1);
 animation-iteration-count:infinite;
 animation-play-state:paused;
}
*#stop-motion-animation > div:hover{
 -webkit-animation-play-state:running;
 animation-play-state:running;
}
@-webkit-keyframes ani{
 16.66%{
  background-position:-120px 0;
 }
 32.32%{
  background-position:-240px 0;
 }
 48.98%{
  background-position:-360px 0;
 }
 65.64%{
  background-position:-480px 0;
 }
 82.3%{
  background-position:-600px 0;
 }
}
@keyframes ani{
 16.66%{
  background-position:-120px 0;
 }
 32.32%{
  background-position:-240px 0;
 }
 48.98%{
  background-position:-360px 0;
 }
 65.64%{
  background-position:-480px 0;
 }
 82.3%{
  background-position:-600px 0;
 }
}

--

生 命沒有公式。天，不會定規則。～不惑仔

[不惑仔]

這個範例每格尺寸一樣，也可以簡化成這麽寫…

css 片段

*#stop-motion-animation > div{
 width:120px;
 height:120px;
 background-image:url(dog2.png);
 background-repeat:no-repeat;
 

-webkit-animation-name:ani;
 -webkit-animation-duration:0.6s;
 -webkit-animation-timing-function:steps(6);
 -webkit-animation-iteration-count:infinite;
 -webkit-animation-play-state:paused;
 animation-name:ani;
 animation-duration:0.6s;
 animation-timing-function:steps(6);
 animation-iteration-count:infinite;
 animation-play-state:paused;
}
*#stop-motion-animation > div:hover{
 -webkit-animation-play-state:running;
 animation-play-state:running;
}
@-webkit-keyframes ani{
 100%{
  background-position:-720px 0;
 }
}
@keyframes ani{
 100%{
  background-position:-720px 0;
 }
}

[不惑仔]

考量到把一幀一幀分解動作圖片合成一幀長長的連續圖，有時候不見得方便。改成直接以 img 分別加進每個分解動作圖，然後用 text-indent 產生動畫，或許也是不錯的作法。

參考→展示

另外加了會變換不同彩度、亮度的背景，以彰顯 PNG 平順邊緣的優勢。

換成這組分解動作圖片，共 5 幀，每幀尺寸 120 x 120 px 。

(圖片來源：david lanham beast， 經過我分拆為 5 幀單獨圖檔。)

假設檔名為 dog3-1.png ~ dog3-5.png

html 片段

<section id="stop-motion-animation">
 <div><img alt="" src="dog3-1.png"><img alt="" src="dog3-2.png"><img alt="" src="dog3-3.png"><img alt="" src="dog3-4.png"><img alt="" src="dog3-5.png"></div>
</section>

css 片段

*#stop-motion-animation > div{
 width:120px;
 height:120px;
 white-space:nowrap;
 overflow:hidden;
 -webkit-animation-name:ani,ani-1;
 -webkit-animation-duration:0.5s,20s;
 -webkit-animation-timing-function:steps(5),ease;
 -webkit-animation-iteration-count:infinite;
 -webkit-animation-direction:normal,alternate;
 -webkit-animation-play-state:paused,running;
 animation-name:ani,ani-1;
 animation-duration:0.5s,20s;
 animation-timing-function:steps(5),ease;
 animation-iteration-count:infinite;
 animation-direction:normal,alternate;
 animation-play-state:paused,running;
}
*#stop-motion-animation > div:hover{
 -webkit-animation-play-state:running;
 animation-play-state:running;
}
*#stop-motion-animation > div img{
 vertical-align:middle;
}
@-webkit-keyframes ani{
 100%{
  text-indent:-600px;
 }
}
@-webkit-keyframes ani-1{
 0%{
  background-color:hsl(240,100%,50%);
 }
 25%{
  background-color:hsl(120,100%,75%);
 }
 50%{
  background-color:hsl(0,100%,75%);
 }
 75%{
  background-color:hsl(180,100%,60%);
 }
 100%{
  background-color:hsl(60,100%,90%);
 }
}
@keyframes ani{
 100%{
  text-indent:-600px;
 }
}
@keyframes ani-1{
 0%{
  background-color:hsl(240,100%,50%);
 }
 25%{
  background-color:hsl(120,100%,75%);
 }
 50%{
  background-color:hsl(0,100%,75%);
 }
 75%{
  background-color:hsl(180,100%,60%);
 }
 100%{
  background-color:hsl(60,100%,90%);
 }
}

參考→實際展示

生 命沒有公式。天，不會定規則。～不 惑仔