画面をスワイプするCSSアニメーションをサンプルを元に作成してください

【概要】画面をスワイプするCSSアニメーションの作成をお願いできればと思います。 デザイン元となる参考動画を添付いたしますので、その動画とほぼ同じ物をCSSアニメーションとして描いていただきたいです。(利用者がこのサイトはスワイプして使うサイトなんだと認識させることがアニメーションの目的です)(CSSアニメーションで作成するのはサンプルの画面中央のスマホとそれを動かす指です。裏の画面は左上のアイコンなどは無視してください。) CSSアニメーションでなくても最新の技術などで同様のことができる場合はCSSアニメーション限った話ではありませんが、PageSpeed Insightsで測定を行いますので警告やファイル数が増大する物は採用できません。 動作環境はスマホ(iPhone 6s以上 Safari・Chrome最新)・PC(Chrome最新とEdge)どちらからでも正しく見られるにしてください。 提供できるサンプルは動画一点のみですので、それを元に制作をお願いします。 制作の際はフリー素材等は一切使用せずオリジナルで作っていただけると幸いです。 また、.png等の画像のURLを埋め込んだり画像ファイルの等はご遠慮いただき、全てCSSでのみ動作するように作成してください なるべく軽量になるようにご配慮いただけると幸いです。 納品はCSSのコードと、表示に必要なHTMLコード数行(適当なDIV要素にID="swipe-animation"の様な)を想定してます。 使用時は半透明で使用しますので、制作時はご配慮いただけると幸いです。 【目的】様々なウェブサイトで使用します。 今回募集する経緯として、ウェブページの高速化が目的で、現在の環境だと画像ファイル、動画ファイルを使用している関係で最大0.7MB、最小0.3MBのファイル容量となっています。 これを最低でも0.1MBで少なければ少ないほど良いです。 【依頼背景】ユーザーに操作方法として画面をスワイプさせる為の、チュートリアルのような立ち位置で使用します。 【提案の際のお願い】 ・CSSアニメーションのいくつかのポートフォリオ ・SEOや軽量な素材の製作経験など簡単にアピールしていただければと ・納期までの期間 ファストビューされる一番大事なチュートリアルで使われる素材です。 「高品質な物」を希望しますので、高い品質を担保するためにさらなる予算が必要とあればお申し付けください また、サイトで使用される素材の一新、デザイン感の統一なども考えていますので満足のいく品質であれば追加でサイト素材作成依頼もする予定です。