東京のWeb制作会社LIGLIGならできるおもしろいこと。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。最近のブログではまとめ記事中心に書いていたのですが、このまえ編集担当の朽木に「最近エンジニアっぽい記事書いてないよね。」というグサっとくる一言をもらったので、今回はそれっぽい記事を書いてみようと思います。keyframes(CSS3)とSassでイケてるアニメーションをシンプルなコードで実装する方法はじめにモダンブラウザでは、CSS3のanimationプロパティ、@keyframesの2つを使ってイケてるアニメーションがJS抜きで実装できます。そいつあすごいぜって話なんですが、1つ心配なことが。それは、アニメーションのバリエーションが複数ある場合、コード量が長くなりがちという問題。́Д`)実践その1というわけで、Sassを使って簡潔に書くことにしましょう。試行錯誤を繰り返し、いろんなサイトにインスパイアされた結果、私が辿り着いた書き方は以下の3つを守ることです。0.15s);}これらの実行結果がこちら↓です。(※アニメーションに直接関係ないHTMLやCSSは省きました)デモ1http://211.125.65.24/demo/2014/08/key_frame/demo1.html一見すると「opacityいじってるだけの割に記述量長くねえ?」と思われるかもしれません。バリエーションがたくさんある場合は最初に1,2の@mixinを記述しておけば、後は3のような記述を書くだけなので楽ができるはずです。このようなやり方だと、いろんなバリエーションが出せるようになります。そのサンプルを2つほど挙げてみたいと思います。実践その2今度は先ほどの正方形を10個用意して、連続で透明度を変えてみます。$DELAY);}}上記の例ではfor文を使って同じ処理を繰り返してます。その際、変数$iを使って微妙にdelayの値をズラすことで、連続してアニメーションを発生させています。opacity以外のプロパティも入れて動きをちょい工夫してみます。$DELAY);}}}}上記の例ではデモ2のスタイルにさらにtranslateYを追加して、要素が下からふわっと上がってくるようにしています。実践その3最後はJSもちょっと書きつつ、複数のkeyframesを使ってロード時のアニメーションっぽいものを作ってみようと思います。src="./js/common.js"></script></body>↑のコードでは、以下のようなことをしています。bodyタグにクラス”animating”があればアニメーションするようSCSSを書いておくあらかじめ、loading要素(#loading)を全面に表示配置しておくロード完了時にloading要素をfadeOutさせると同時に、bodyタグにクラス”animating”を付与するloading要素が消えると同時にアニメーション発動SCSSはちょっと長くなってしまいましたが、普通に書くよりは短く、わかりやすくなったかと思います。まとめいかがでしたでしょうか。Sassで効率的にkeyframesを記述することで、さまざまなアニメーションがシンプルに書けるようになりました。簡単に実装できるので、どんなサイトでも入れてみたくなりますよね。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。