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

Question

我尝试了以下场景,我需要动画我的背景图像,如在我的div悬停时从下到上填充.而我的动画不像从底部填充而是从底部到顶部滑动.任何人都可以建议我如何才能达到我的结果.我也可以使用jQuery动画和css3关键帧动画.

下面是我的小提琴代码

.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>

小提琴链接

Answer 1

设置background-position为底部将有所帮助:

.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>