[Akito Nishimura]

### 前提情報
【お使いの Snow Monkey のバージョン】12.1.3
【お使いの Snow Monkey Blocks のバージョン】10.0.1
【お使いの Snow Monkey Editor のバージョン】4.0.0
【お使いのブラウザ】Google Chrome 87.0.4280.88

### 実現したいこと
Snow Monkey Editorで簡単にフェードインアップ・ダウンができるのはとても便利で助かっています。フェードインレフト・ライトの表示もできるようにしたいのですがどのように対応すれば良いでしょうか。

### 発生している問題
思うようにアニメーションが動かない状態

### 試したこと
下記サイトを参考にCSSおよび必要なhtmlタグを挿入

「上・下・左・右からスライドしながらフェードイン」

CSSで作るスライドするフェードインアニメーション【サンプルあり】

この記事では、ウェブサイトでよく見かける、CSSのフェードインアニメーションのやり方をサンプル付きで解説していきます。コピペでサクっとフェードインを実装できるよう…

rico-notes.com

♥ 0

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

[Olein_jp]

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

実際、どのような状況になっているのか想像しにくいので最適なアドバイスが思いつきませんが、公開URLなどを用意されるか、具体的にどのような方法でCSS（と 必要なhtmlタグ ？）を挿入されたのかを共有いただけますと、アドバイスしやすいかなと思います。

ご確認お願いいたします。

♥ 0

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

[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

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

[Olein_jp]

ちょっと試してみました。

結論からお伝えすると、animation部分の記述が間違っています。

例えば、「左からフェードイン」の部分ですが、
animation: fadein-left 1.5s 0 ease-out forwards;
と記載がありますが、この0が何を意図しているのかわかりませんが、プロパティの指定がおかしくなっています。

ですので、とりあえず
animation: fadein-left 1.5s ease-out forwards;
こうするだけで動作します。追加CSSからの記述でも問題ありません。

こちらもご一読いただいて、理解を深めてみてください。また、CSSアニメーションなどをコピペでサクッとやりたい気持ちはよくわかるのですが、本件のように問題が発生した際に自ら解決できるようが手っ取り早いと思いますので、開発者ツールで動作がうまく行かない原因を確認してみるなど、試してみてください。

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

♥ 2

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

[Akito Nishimura]

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

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

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

♥ 1

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

[投稿者]

投稿