[애니메이션] 이미지 커튼

html

<div class="img">
  <img src="img/main_visual.jpg" alt="">
  <span class="mask a"></span>
  <span class="mask b"></span>
  <span class="mask c"></span>
  <span class="mask d"></span>
</div>

css

@keyframes mask {
  0% {
    width: 25%;
    background: #000;
  }
  50% {
    width: 25%;
    background: #000;
  }
  99% {
    background: #000;
  }
}
@keyframes scaleani {
  0% {
    transform: scale(1.3);
  }
  30% {
    transform: scale(1.3);
  }
}

.img {
  width: 94%;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.img img {
  width: 100%;
  transform: scale(1);
  animation: scaleani 2s;
}
.img .mask {
  display: block;
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, 0.16);
}
.img .mask.a {
  left: 0%;
  animation: mask 0.4s;
}
.img .mask.b {
  left: 25%;
  animation: mask 0.6s;
}
.img .mask.c {
  left: 50%;
  animation: mask 0.8s;
}
.img .mask.d {
  left: 75%;
  animation: mask 1s;
}

원리
이미지 태그 위에 mask 선 4개를 간격을 두어 만든다.
mask애니메이션을 시간차로 실행한다.
mask애니메이션은 mask를 나눠진 구역만큼 가리다가 원래 너비로 돌아온다.
마지막으로 이미지의 사이즈를 줄이는 애니메이션을 실행한다.