こんにちは、なないろフロントエンドプログラマーのTです。

画像表示のアニメーションを作ったのでメモとして残しておきます。

プレビュー

画像をクリックするとアニメーションが実行されます

ソースコード

-HTML-

<div class="image imgparent">
    <img src="./sample.jpg">
</div>

-CSS-

.imgparent{
  position:relative;
}
.imgparent img{
  opacity:0;
  animation-duration:0s;
  animation-delay:0.5s;
  animation-iteration-count:1;
  animation-fill-mode:forwards;
}
.imgparent:before{
  content:"";
  display:block;
  position:absolute;
  top:0;
  left:0%;
  z-index:1;
  height:100%;
  background-color:#EE7D1C;

  animation-duration:1s;
  animation-timing-function:cubic-bezier(0.51, 0.83, 0.32, 0.98);
  animation-iteration-count:1;
  animation-fill-mode:forwards;
}

/*実行*/
.imgparent img{
  animation-name:imgopacity;
}
.imgparent:before{
  animation-name:imgeffect;
}
/*end実行*/

@keyframes imgeffect{
  0%{
    left:0%;
    right:100%;
  }
  50%{
    left:0%;
    right:0%;
  }
  100%{
    left:100%;
    right:0%;
  }
}

@keyframes imgopacity{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}