独自CSSを利用することで、アイキャッチャーにアニメーションを設定することが可能です。アイキャッチャーを目立たせたい場合に有効です。

(1) 管理画面右上の「設定」ボタンをクリックします。

(2)「チャット」＞「デザイン」＞「独自CSS」を選択します。

(3)「独自CSSを入力」欄にデザイン変更のコードを入力し、「更新」ボタンを押します。

※コードを追加する際は、既存のコードを消さずに追記します。

デザイン変更コード

アイキャッチャーを揺らす

#eye_catcher{


animation: shake_eye_catcher 3s infinite;


}




@keyframes shake_eye_catcher {


0% { transform:translateY(0px); }


50% { transform:translateY(50px); }


100% { transform:translateY( 0px); }


}

※「3s」の箇所を「1s」など小さい値にすると高速で動き、「5s」など大きい値にするとゆっくり動きます。
※「50px」の箇所を「20px」など小さい値にすると小刻みに動き、「80px」など大きい値にすると大きく動きます。

時計回りに回転させる

#eye_catcher{


  animation: transform_eye_catcher 3s infinite;


}




@keyframes transform_eye_catcher {


0%   { transform: rotate(0deg); }


100% { transform: rotate(360deg); }


}

X軸を軸に回転させる

#eye_catcher{


  animation: rotation_eye_catcher 2s linear infinite;


}


 


@keyframes rotation_eye_catcher {


  0%   { transform: rotateX(0deg); }


  100% { transform: rotateX(360deg); }


}

Y軸を軸に回転させる

#eye_catcher{


  animation: rotation_eye_catcher 2s linear infinite;


}


 


@keyframes rotation_eye_catcher {


  0%   { transform: rotateY(0deg); }


  100% { transform: rotateY(360deg); }


}

マウスオーバーで拡大する

#eye_catcher:hover{


animation: scale-up-right_eye_catcher 3s;


}




@keyframes scale-up-right_eye_catcher {


  0% {


    -webkit-transform: scale(0.9);}


}

マウスオーバーでアニメーションを一時停止する

アニメーションを設定したコードに加え、以下のコードを追記します。
※既存のコードを消さずに追記します。

#eye_catcher:hover {


     animation-play-state: paused;


}