CSS3のanimation-timing-function: steps(n) が便利 - QiitaDEMO デモを追加しました (2015-10-16) http://codepen.io/skwbr/pen/bVoJqw 概要 CSS3のanimation-timing-function: steps(n) が便利なのでGifアニメやJSを使用したPNGシーケンスはもう使わないようにしたいな、という話です。 例えば のようにY方向に100pxの間隔で5コマを並べたSprite画像があるとして、 background-positionでコマ送りアニメーションをさせるときは良くJSが使われていますが、 CSS3の animation-timing-function: steps(n); を使うとその代わりができます。 .hoge { ..... animation: parapara 1s steps(5) 0s infinite; } @keyframes parapara { 0%
ポストイットは逆貼りでアウトラインプロセッサになる。 | コトノハコトバ：言葉で考えるマーケティング [コンテンツ制作のKID'S COMPANYブログ]![ポストイットは逆貼りでアウトラインプロセッサになる。 | コトノハコトバ：言葉で考えるマーケティング [コンテンツ制作のKID'S COMPANYブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/30fa3ce23495f870d826fa58577084fd6ff06f74/height=288;version=1;width=512/https%3A%2F%2Fpds.exblog.jp%2Fpds%2F1%2F201303%2F31%2F55%2Fe0279055_2175560.jpg)
