鍍金池/ 問答/HTML5  HTML/ css3如何做從上往下漸顯的動畫

css3如何做從上往下漸顯的動畫

如題，等于一個遮罩層一樣從上往下逐漸顯示

意思就是一張圖片要做一個三秒的漸現(xiàn)動畫，開始從上往下顯示0%，然后30%，然后60%，然后100%
應(yīng)該如何完成

回答
編輯回答
離夢

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;
}
2018年8月5日 05:13
編輯回答
雅痞

實現(xiàn)方式有很多種。
從上往下漸顯 拆分一下也就是 透明度從0 - 1， top從-height到height，然后設(shè)置一個transition，應(yīng)該就可以了

2017年3月7日 05:35
編輯回答
爆扎

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

2017年9月9日 07:57
編輯回答
失心人

問題描述的不清晰，希望能補充上個圖什么的

2017年4月6日 21:29
編輯回答
維她命

題主意思應(yīng)該是那種滾動到下面 好多圖片開始漸漸顯示 好多網(wǎng)站首頁都有這種特效

2017年9月23日 05:07