Animate.cssのフェードイン系アニメーションで要素が消えてしまう

外部プラグイン
Waypoint.js　Animate.cssを組み合わせてアニメーションの練習をしています。

スクロールに合わせてHTML要素が下からフェードインしてくるエフェクトを作っています。

.animatedをCSS opacity:0;で非表示にしておいたのを
jQueryで　下にスクロールさせるときに、
アニメーションの値をaddClassで与えて、表示させる様にしています。

いくつかのフェードイン系のアニメーションは
イメージ通りになるのですが、
bounceInRight のアニメーションを試してみたくて
記述して、実行してみた所、
Box要素が右から現れたと思ったら
そこにとどまらず、消えてしまいました。

bounceIn
bounceInDown
bounceInLeft
など
Bouncing entrances系の表示だと上手くいかない様です。

これを右から現れた後、
ずっと表示されたままにしてくれる方法などはありますか？

HTML
1
2<!DOCTYPE html>
3<html lang="ja">
4
5<head>
6  <meta charset="utf-8">
7  <title>Animate Test</title>
8  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css">
9  <link rel="stylesheet" href="main.css">
10  
11</head>
12
13<body>
14  <div class="boxes">
15    <div class="box animated">box</div>
16    <div class="box animated">box</div>
17    <div class="box animated">box</div>
18    <div class="box animated">box</div>
19    <div class="box animated">box</div>
20    <div class="box animated">box</div>
21    <div class="box animated">box</div>
22    <div class="box animated">box</div>
23    <div class="box animated">box</div>
24    <div class="box animated">box</div>
25  </div>
26
27  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
28  <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
29  <script src="main.js"></script>
30</body>
31
32</html>

css
1 body {
2      background: repeating-linear-gradient(0deg,
3        #ffffff,
4        #ffffff 40px,
5        #dedede 40px,
6        #dedede 80px);
7    }
8
9    .boxes {
10      margin: 100vh auto;
11    }
12
13    .box {
14      border: 1px solid #000;
15      width: 10em;
16      padding: 10px;
17      margin: 2em auto;
18      text-align: center;
19    }
20
21    .animated {
22      
23      opacity: 0;
24    }

java
1
2
3$('.animated').waypoint({
4  handler(direction) {
5    
6    if (direction === 'down') {
7      /
8      $(this.element).addClass('bounceInDown');
9
10      /
11      this.destroy();
12    }
13  },
14
15 
16  offset: '50%',
17});

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは、以下のコードをCSSファイルに追加してみたらどうでしょうか？

CSS
1.bounceIn,
2.bounceInDown,
3.bounceInLeft,
4.bounceInRight {
5    opacity: 1;
6}

投稿2020/05/17 22:04

fake_shibe

総合スコア806

AmanoEriko

2020/05/18 02:51

ありがとうございます！解決いたしました。これで憧れのアニメーションが指定できそうです！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Animate.cssのフェードイン系アニメーションで要素が消えてしまう

関連した質問