html - 在CSS中从上到下过渡图像

Question

我想从上到下方向传输我的图像。现在是从左下到上过渡。

HTML

<header>
<img src="http://res.cloudinary.com/paresh/image/upload/v1464936481/imgpsh_fullsize_aab4vm.png"><br/>
<img src="http://res.cloudinary.com/paresh/image/upload/v1464936481/imgpsh_fullsize_aab4vm.png"><br/>
<img src="http://res.cloudinary.com/paresh/image/upload/v1464936481/imgpsh_fullsize_aab4vm.png"></header>

JS

$(window).scroll(function() {
if ($(this).scrollTop() > 1){  
    $('header').addClass("sticky");
  }
  else{
    $('header').removeClass("sticky");
  }
});

CSS

header{
  position: fixed;
  width: 100%;
  text-align: center;
  font-size: 72px;
  line-height: 108px;
  color: #fff;
  font-family: 'PT Sans', sans-serif;
  opacity : 0;
}

header.sticky {
  font-size: 24px;
  line-height: 48px;
  text-align: left;
  padding-left: 20px;
  transition: all 0.6s ease;
  opacity : 1;
  animation-direction: normal;
}

body{
  height:1000px
}

代码笔:http://codepen.io/anon/pen/ezNZQV

Answer 1

添加 padding-left: 20px; 到 header 就像在 header.sticky 上一样。要从上到下设置动画，请将 bottom:0; 添加到 header。

代码(https://jsfiddle.net/6kbcp54m/1/):

$(window).scroll(function() {
  if ($(this).scrollTop() > 1){  
    $('header').addClass("sticky");
  }
  else{
    $('header').removeClass("sticky");
  }
});

header {
  position: fixed;
  width: 100%;
  text-align: center;
  font-size: 72px;
  line-height: 108px;
  color: #fff;
  font-family: 'PT Sans', sans-serif;
  opacity : 0;
  padding-left: 20px;
  bottom:0;
}
header.sticky {
  font-size: 24px;
  line-height: 48px;
  text-align: left;
  padding-left: 20px;
  transition: all 0.6s ease;
  opacity : 1;
  animation-direction: normal;
}
body {
  height:1000px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <img src="http://res.cloudinary.com/paresh/image/upload/v1464936481/imgpsh_fullsize_aab4vm.png"><br/>
  <img src="http://res.cloudinary.com/paresh/image/upload/v1464936481/imgpsh_fullsize_aab4vm.png"><br/>
  <img src="http://res.cloudinary.com/paresh/image/upload/v1464936481/imgpsh_fullsize_aab4vm.png">
</header>