CSSを使用した画像のフェードイン効果の実装方法

1. トランジションを使用したフェードイン:

   <style>
   .fade-in {
       opacity: 0;
       transition: opacity 1s ease-in;
   }
   .fade-in.show {
       opacity: 1;
   }
   </style>
   <img src="image.jpg" class="fade-in">
   <script>
   document.addEventListener("DOMContentLoaded", function() {
       var image = document.querySelector(".fade-in");
       image.classList.add("show");
   });
   </script>

この例では、fade-inクラスが画像に適用されます。最初はopacity: 0で非表示になり、transitionプロパティによってアニメーションが適用されます。showクラスが追加されると、opacity: 1に変更されてフェードインが実現されます。

2. キーフレームアニメーションを使用したフェードイン:

   <style>
   @keyframes fade {
       0% {
           opacity: 0;
       }
       100% {
           opacity: 1;
       }
   }
   .fade-in {
       animation: fade 1s ease-in;
   }
   </style>
   <img src="image.jpg" class="fade-in">

この例では、fadeというキーフレームアニメーションを定義し、fade-inクラスに適用しています。アニメーションは1秒かけて進行し、opacityの値が0から1に変化することでフェードインが実現されます。

これらの方法を使用することで、CSSを介して画像にフェードイン効果を追加することができます。適用したい方法を選んで、自身のプロジェクトに適用してみてください。