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