当HP。CSSを微修正。回転しながら外から中に入ってくるアニメーション
See the Pen アニメーション：外から回りながら出てくる by Rin5Graphic (@Rin5Graphic) on CodePen.
当ホームページを少しだけ修正しました。
以前、アイコンが回転しながら、画面内に現れるようなCSSアニメーションを用意しまして。
簡易的に設置してみたものの、移動をせずにその場で回転だけする時と、きちんと移動する時がありました。
どうにも挙動が安定していませんでした。
@keyframesのアニメーションで、translateを使って座標移動をしていたのですが、このあたりのコードを書き換えてみました。
translateから、marginへ変更です。
また今まではパソコン版とスマホ版で、同じコードを使ってアニメーションさせていました。
冗長になりますが、それぞれ別コードに分けて、細かく位置の設定をし直しました。
まだ完璧ではありませんが、これでだいぶ改善されました。
パソコンで、アニメーション中にブラウザの横幅を変えると、位置が少しずれてしまう点が気になります。
アニメーション終了後に正確な位置まで戻りますが、パッと動くので2重で気になります。
原因は、アニメーション中に変更後のブラウザ幅が再計算されていないからだと予想しています。
ただ気にはなりますが、スマホで見ている分にはズレが発生していない点と、挙動が改善された点から、一旦の区切りとしました。