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

Question

如题，等于一个遮罩层一样从上往下逐渐显示

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

Answer 1

HTML:<div class="gradient-wrapper">&nbsp; <img src="demo.png"></div>CSS:@keyframes wrapper-gradient {&nbsp; 0% {&nbsp; &nbsp; transform: translateY(-100%);&nbsp; }&nbsp; 100% {&nbsp; &nbsp; transform: translateY(0);&nbsp; }}@keyframes img-gradient {&nbsp; 0% {&nbsp; &nbsp; transform: translateY(100%);&nbsp; }&nbsp; 100% {&nbsp; &nbsp; transform: translateY(0);&nbsp; }}.gradient-wrapper {&nbsp; display: inline-block;&nbsp; overflow: hidden;&nbsp; animation: wrapper-gradient 2s linear;}.gradient-wrapper>img {&nbsp; animation: img-gradient 2s linear;}