コンテンツ fade-in

agemai

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="css/reset.css">
   <title>Document</title>
   <style>
       .wrapper{
           width: 1005;
           max-width: 1440px;
           margin: 0 auto;
       }
       .main{
           position: relative;
       }
       .main img{
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           opacity: 0;
           animation: fadein 6s ease forwards;
       }
@keyframes fadein {
   100% {  opacity: 1;}
}

/*以下遅延の指定*/
.main img.fade1 {animation-delay: 1s;}
.main img.fade2 {animation-delay: 2s;}
.main img.fade3 {animation-delay: 3s;}
.main img.fade4 {animation-delay: 4s;}
.main img.fade5 {animation-delay: 5s;}
.main img.fade6 {animation-delay: 6s;}
       

   </style>
</head>

<body>
   <div class="wrapper">
       <div class="main">
        <img src="img/1.png" alt="" class="fade1">
        <img src="img/2.png" alt="" class="fade2">
        <img src="img/3.png" alt="" class="fade3">
        <img src="img/4.png" alt="" class="fade4">
        <img src="img/5.png" alt="" class="fade5">
        <img src="img/6.png" alt="" class="fade6">
       </div>
   </div>
</body>
</html>



この記事が気に入ったらサポートをしてみませんか？