javascript - 如何为背景图像的高度设置动画

Question

我已经尝试了以下场景，我需要为我的背景图像设置动画，比如在我的 div 悬停时从下到上填充。而我的动画不像从底部填充，而是像从底部滑动到顶部。任何人都可以建议我如何以正确的方式实现我的结果。我也很喜欢 jQuery 动画和 css3 关键帧动画。

下面是我的 fiddle 代码

.bg {
  background: url("https://9887c7297bf844d024e4cccb28a722f62dbe3d73.googledrive.com/host/0B6jEeghp1bpxfkszMFVRcDZBdGF4d012d0hjaS0xWTRvRkh6SDNEUFhUb2pETzlSYWZtbzA/work_home.png") no-repeat center;
  height: 250px;
  position: relative;
}
span {
  background: url(https://9887c7297bf844d024e4cccb28a722f62dbe3d73.googledrive.com/host/0B6jEeghp1bpxfkszMFVRcDZBdGF4d012d0hjaS0xWTRvRkh6SDNEUFhUb2pETzlSYWZtbzA/work_home_animate.png) no-repeat top 32px center;
  bottom: 0px;
  height: 0;
  transition: height 0.5s;
  position: absolute;
  right: 0;
  left: 0;
}
.bg:hover span {
  height: 184px;
}

<div class="bg"><span></span>
</div>

Fiddle Link

Answer 1

将 background-position 设置为 bottom 会有所帮助:

.bg {
  background: url("https://9887c7297bf844d024e4cccb28a722f62dbe3d73.googledrive.com/host/0B6jEeghp1bpxfkszMFVRcDZBdGF4d012d0hjaS0xWTRvRkh6SDNEUFhUb2pETzlSYWZtbzA/work_home.png") no-repeat center;
  height: 250px;
  position: relative;
}

span {
  background: url(https://9887c7297bf844d024e4cccb28a722f62dbe3d73.googledrive.com/host/0B6jEeghp1bpxfkszMFVRcDZBdGF4d012d0hjaS0xWTRvRkh6SDNEUFhUb2pETzlSYWZtbzA/work_home_animate.png) no-repeat;
  bottom: 0px;
  height: 0;
  position: absolute;
  right: 0;
  left: 0;
  transition: height .5s;

  background-position: center bottom;
}

.bg:hover span {
  height: 152px;
}

<div class="bg"><span></span></div>