css3如何做从上往下渐显的动画

Question

如题，等于一个遮罩层一样从上往下逐渐显示意思就是一张图片要做一个三秒的渐现动画，开始从上往下显示0%，然后30%，然后60%，然后100%应该如何完成

Answer 1

HTML:

<div class="gradient-wrapper">

  <img src="demo.png">

</div>

CSS:

@keyframes wrapper-gradient {

  0% {

    transform: translateY(-100%);

  }

  100% {

    transform: translateY(0);

  }

}

@keyframes img-gradient {

  0% {

    transform: translateY(100%);

  }

  100% {

    transform: translateY(0);

  }

}

.gradient-wrapper {

  display: inline-block;

  overflow: hidden;

  animation: wrapper-gradient 2s linear;

}

.gradient-wrapper>img {

  animation: img-gradient 2s linear;

}