yui540(@yui540)です。普段は、pixivFANBOXというサービスのCSSエンジニアをしています。CSSアニメーションの実装方法を一部解説します。FES.って何?」という方もいると思うので、簡単にご説明します。お話ししてみたい方をお招きして、サービス開発で得た技術的知見とピクシブの未来についてお話しするテックカンファレンスです。イベントの情報を徐々に解禁していくため、LPは第一弾、第二弾...ようなバージョン分けをしています。各バージョンに応じて、ページのアニメーションも変えています。実装の解説に移る前に、CSSアニメーションを活用できるパターンを4種類ご紹介します。状態遷移アニメーション」「ループアニメーション」です。アニメーションさせながら状態遷移させるものループアニメーション再生を始めてから、繰り返し再生され続けるアニメーション動画のようなアニメーションローディングアニメーションUIの状態遷移アニメーションUIの状態遷移アニメーションループアニメーションこのようにCSSアニメーションは、動画のような派手なフル画面アニメーションから細かなUIの状態遷移のアニメーションまで、幅広い使い方が出来ます。いろんなパターンのアニメーションを見たいという方は私が日々更新しているアニメーションスニペットをご覧ください。FES.のLPの重要ポイントのみを解説さて、本題に戻ります。LP(第一弾)の実装で私が重要だと思う部分を一部解説します。オープニングアニメーションで使われた「ボヤけた視界の表現」です。blur()をアニメーションさせるのではなく、下記のような実装の工夫がなされています。absolute;で重ねます。opacity()でも代用可)の値を0➡︎1➡︎0に変化させるfadeInOutを定義し、.logo--weak-blurと.logo--strong-blurを交互に表示・非表示させています。reverse;でキーフレームの再生方向を反転させて、.logo--weak-blurと.logo--strong-blurそれぞれ交互に表示されるように調整しています。このようにanimation-directionを使うことでキーフレーム定義を節約することが出来ます。reverse;すると、イージング(animation-timing-function)も反転してしまいます。blur();をそのままアニメーションさせないのは、transitionやanimationプロパティでアニメーションさせた場合、著しくパフォーマンスが悪いからです。ブラウザ間の描画差異、アニメーションのコマ落ちなどが起きてしまうため、ぼかしが弱い要素と強い要素を交互に表示・非表示する方法で描画コストを下げています。blur();分の描画コストを節約することができます。次にまぶたの表現ですが、これは二つのdiv要素で構成されています。...);で端をグラデーションでぼかすことでまぶたっぽさを表現しています。eyeBottomキーフレームを定義します。まぶたを複数回動かすためにanimationプロパティをカンマ(,)区切りで指定する技を使います。animationプロパティには、カンマ(,)区切りでキーフレーム等を渡すことでアニメーションを並列に走らせたり、直列に走らせたりすることができます。5回動かしているので、5個キーフレームをカンマ区切りで指定しています。これで、ボヤけた視界の表現が完成です。いかがでしょうか?とてもシンプルな実装で質感のある表現ができたかと思います。styled-componentsでコーディングされているのですが、どのようにしてスクロールアニメーションを発火させたのかをご紹介します。スクロール検知は下記のような簡単にIntersectionObserverをラップしたhooksを作っています。ファーストビューで画面に対象要素が入っていても、スクロールに合わせてアニメーション発火させたいので、初回スクロールのみscrollイベントを使っています。isIntersected];};useIntersectionObserverは下記のように、画面内に入ったかどうかを検知したい要素にrefを渡し、画面内に対象の要素が入ったら、isIntersectedがtrueになり、アニメーションが発火される仕組みになっています。CSSアニメーションで実現可能です。慣れてくれば、このような面白い動きも簡単に作れるようになります。CSSアニメーションの強みとして、レスポンシブ対応のフル画面アニメーションをライブラリやプラグインに頼ることなく、手軽に実装できることです。LP(第二弾)ついてお話ししますので、当日来られる方はお楽しみに!ピクシブ株式会社では、CSSアニメーションが大好きなエンジニアを中途・新卒共に募集しています!詳細については、ピクシブ採用サイトをご覧ください。それでは今回はこの辺りで。FES.で皆さんとお会いできることを楽しみにしています!さようなら!yui5402019年4月新卒入社。クリエイター事業部FANBOX部所属。pixivFANBOXでCSSエンジニアをしています。特技はCSSアニメーションを使って、バチバチに動くWebサイトを作ること。文化の補完は強さになる。»common.min.js.html。