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;
}

Answer 2

实现方式有很多种。
从上往下渐显 拆分一下也就是 透明度从0 - 1， top从-height到height，然后设置一个transition，应该就可以了

Answer 3

问题描述的不清晰，希望能补充上个图什么的

Answer 4

用css3 animation属性
div
{
animation:mymove 3s;
-webkit-animation:mymove 3s;
}
@keyframes mymove
{
0% {top:0px; opacity：0;}
30% {top:100px; opacity：.3;}
60% {top:200px; opacity：.6;}
100% {top:3px; opacity：.6;}
}

Answer 5

题主意思应该是那种滚动到下面 好多图片开始渐渐显示 好多网站首页都有这种特效