こんにちは。デザイナーの@です。

WEBサイトを作る際、ちょっとしたアニメーションにGIFアニメを利用すると面白い効果ができたりしますよね。
ただ、gifはjpgやpngに比べると使える色が限られるため画質の劣化が目立つのも気になる…ということで、CSS3のキーフレームを利用してコマ送りのアニメーションを試してみました

.tsukubach-animation {overflow: hidden;width: 256px;height: 256px;background: url(//img01.tsukuba.ch/usr/t/e/c/tech/20140916_2.png) no-repeat;-webkit-animation: jump 2s steps(23, end) infinite;animation: jump 2s steps(23, end) infinite;}@-webkit-keyframes jump {0% {background-position: 0 0;}100% {background-position: 0 -5888px;}}@keyframes jump {0% {background-position: 0 0;}100% {background-position: 0 -5888px;}}