jQueryでanimate__fadeInLeft、PCでは効きますが、SPでは左からからでなく  
ただのfadeInになってしまいました。

```

    <section class="container">
      <div class="contents1">
        <picture   class="animate__animated">
          <source media="(max-width: 767px)" srcset="./img/test.png">
          <source media="(min-width: 768px)" srcset="./img/test.png">
          <img src="./img/test.png" alt="プログラム" >
      </picture>
      </div>
    </section>
    
    picture {
        opacity: 0%;
    }
    
    @media(min-width:768px) {
      .contents1 picture {
         width: 44%;
      }
    }
    
    $('.animate__animated').waypoint({
      handler: function(direction) {
        if (direction === 'down') {
          $(this.element)
            .addClass('animate__fadeInLeft');
        }
      },
      offset: '50%',
    });
    
```

picture内にdisplay:
block;をいれたところSPでもfadeInが左から出てくるようになったのですが、なぜそうなったかの理由が分かりません。  
デベロッパーツール上で、下記プロパティに対してdisplay: block;を無効にしても  
PCでは変わらずfadeInLeftは効きます。

```

    @media(min-width:768px) {
      .contents1 picture {
         width: 44%;
      }
    }
    
```

SPではdisplay: blockが無いと効きませんが、PCではblockがなくても効きます。
CC BY-SA 4.0
2023-08-16T05:56:34.797
95951
2023-08-16T05:56:34.797
59156
question
javascript html css jquery
fadeInがSPに効かず、PCのみに効く　blockが原因の理由