CSSアニメーションやってみた

mariweb さんのサイトのオープンニングアニメーションみたいなのにトライしてみよう、と思いました。

mariweb | 大阪・枚方市のホームページ制作・動画制作

ドットインストールで勉強してみました

詳解CSS アニメーション編 (全9回) - プログラミングならドットインストール
このコースは有料でした。
がんばりました。

mariweb さんのサイトを、Chrome のデベロッパー ツールで見てみました

• index.php
• main.js
• style-css

mariwebさんより、sassのファイルを提供いただきました。

使われているプロパティ（一部）

• transform ・・・変形
  • translate ・・・動かす
  • scale ・・・拡大・縮小
  • rotateZ ・・・ 回転する
• z-index ・・・ 前面、背面（大きいほど前面）
• opacity ・・・ 透明度（0：透明、1：不透明）

作ってみたページ

課題

• Safariでうまく動かない → scale(0) を消したら改善しましたが、理由はよくわからないです・・
• SVGの勉強も必要（ https://dotinstall.com/lessons/basic_svg_v2 ）

感想

• 動くのは楽しい！

参考にさせていただいたページ（一部）

感謝いたします。

CSS3でサクッとできるオープニングアニメーションエフェクト3つ | webの覚え書き ==> https://webnooboegaki.com/htmlandcss/opening-animation

アニメーション終了後にサイトを表示させる方法 | DESIGN OFFICE TIGHT ==> http://smile-design.bz/news_blog/2016/03/05/anai024/

CSS3 アニメーション（使い方やサンプル）/Web Design Leaves ==> http://www.webdesignleaves.com/pr/css/css_basic_07.html

CSS3でアニメーション：初歩の初歩 ｜ Tips Note by TAM ==> https://www.tam-tam.co.jp/tipsnote/html_css/post7917.html

animation-fill-mode プロパティ(アニメーション再生開始まで及び再生終了後の扱い) - CSS リファレンス ==> https://www.marguerite.jp/Nihongo/WWW/RefCSS/animation-fill-mode.html