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

日本語 ディスカッション 総合的なディスカッション
1

以前、DAWNのテーマでヘッダーのロゴを回転させる方法を教えていただいたのですが、

正式に使うテーマがAndamanになり、同じコードをそれらしきところに入れてみても何も変化がなく質問させていただきました。

@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;
}

こちらのコーディングで回転できるのでしょうか。

その場合はどこに入れればいいのかをご教示いただけますと幸いです。

コード編集画面のスクリーンショットが必要であればお申し付けください。

2

@Anonymous_238dd7b1c030c8aa2ccf71a03c9b83ce 様

ご質問いただいているテーマは有料テーマのため、対象CSSファイルを指定してご連絡できないため、調整したCSSをカスタムCSSに追加する方法でご説明させていただきます。

CSSの追加方法

  1. 管理画面 > オンラインストア > カスタマイズボタンをクリック
  2. 歯車マークのテーマ設定をクリック
  3. カスタムCSS欄に下記CSSを追加し保存ボタンをクリック
@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);
  }
}

h2.barracuda.text-logo, .text-logo {
  -webkit-animation: spin 12s infinite linear;
  animation: spin 12s infinite linear;
}

Andaman.png
Andaman.png2800×1560 385 KB

ご参考まで
(キュー小坂)

3

ありがとうございます。

ロゴなのですが、テキストロゴではなくイメージロゴでも回転させることは可能でしょうか。