ヘッダーのロゴを動かしたい

[すん]

ECサイト開設初心者です。

コーディングの知識もない素人ですが

下記サイトのように、ヘッダーのロゴを回転などの動作をさせたいのですが、

いろいろ調べても情報が得られずにいます。

どのような方法でできるのか、ご教示いただけますと幸いです。

ロゴの保存形式やコード編集が必要な場合、コーディングも知りたいです。

ちなみに今使っているテーマはDAWNです。

お手数おかけ致しますが、何卒よろしくお願いいたします。

▼参考サイト

https://wearebraindead.com/ 

[Qcoltd · Accepted solution]

@すん 様

参考サイト様のやり方をそのまま踏襲してしまいますが、

下記のようにされてはどうでしょうか？

※ Dawn 11.0.0で検証しました。

ストア管理画面 > オンラインストア > テーマ > 利用中のテーマの「コード編集」

で、スニペットのbase.cssの120行目付近に下記を追加します。

@keyframes spin {
  0% { -webkit-transform: rotate3d(0, 1, 0, 360deg); transform: rotate3d(0, 1, 0, 360deg) }
  50% { -webkit-transform: rotate3d(0, 1, 0, 180deg); transform: rotate3d(0, 1, 0, 180deg) }
  100% { -webkit-transform: rotate3d(0, 1, 0, 360); transform: rotate3d(0, 1, 0, 360) }
}

.header__heading {
  -webkit-animation: spin 12s infinite linear;
  animation: spin 12s infinite linear;
}

コード編集画面は下図のようになるはずです。

CSSアニメーションの設定方法については下記も参考になります。

https://developer.mozilla.org/ja/docs/Web/CSS/animation

https://developer.mozilla.org/ja/docs/Web/CSS/@keyframes

ご参考まで。

(キュー田辺)

[すん]

ご教授いただきありがとうございます！

できました！