【CSS】How to implement a curtain animation that displays the image after moving the color overlaid on the image from top to bottom（Demo page）

body {
  background: #000;
}

.block {
  margin: 70px auto 0;
}

.img {
  position: relative;
  width: 450px;
  margin: 0 auto;
  overflow: hidden;
}

.img:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 300%;
  transform: translateY(-99.5%);
  background: #fff;
}

.img img {
  opacity: 0;
}

.active .img:after {
  width: 100%;
  height: 0;
  transition: width .6s ease, height .01s ease 3.4s, transform 2s ease .8s;
  transform: translateY(101%);
}

.active .img img {
  opacity: 1;
  transition: opacity .1s ease 1.3s;
}

@media screen and (max-width:640px){
  .img {
    width: 100%;
  }
}

$(window).on('load', function(){
  $(".block").addClass("active");
});