[Akito Nishimura]

さっそくの返信ありがとうございます。上記の通り記述したところ正常に動きました。

また参考情報まで教えていただきありがとうございます。今回のように動かない場合、開発者ツールを用いて確認および解決策を模索するように心掛けます。

解決できたのでトピックを閉じます。年始にも関わらず返答いただきありがとうございました。

♥ 1

いいねをした人: 居ません

[Akito Nishimura]

現状、添付のページに掲載されているCSSのソースコードを、カスタマイズ→追加CSS に入力されて、アニメーションをさせたい部分に任意のCSSクラスを付与したけど動かないということでしょうか？

状況説明が不足しており申し訳ないです。仰る通りの状況で具体的には下記の内容を挿入およびCSSクラスを付与しております。

■カスタマイズ→追加CSSに挿入

/*上からフェードイン*/
.fade-in-top {
  opacity: 0;
  animation: fadein-top 1.5s .3s ease-out forwards;
}

@keyframes fadein-top {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*下からフェードイン*/
.fade-in-bottom {
  opacity: 0;
  animation: fadein-bottom 1.5s 0 ease-out forwards;
}

@keyframes fadein-bottom {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*左からフェードイン*/
.fade-in-left {
  opacity: 0;
  animation: fadein-left 1.5s 0 ease-out forwards;
}

@keyframes fadein-left {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/*右からフェードイン*/
.fade-in-right {
  opacity: 0;
  animation: fadein-right 1.5s 0 ease-out forwards;
}

@keyframes fadein-right {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

■CSSクラスを挿入
画像を左からフェイドインをするため挿入
<div class=”fade-in-left”><figure class=”wp-block-image size-large”></figure></div>

♥ 0

いいねをした人: 居ません

[投稿者]

投稿