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

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>

Fiddle Link

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>

Answer 2

你可以这样做。棕色div从底部“滑动”到顶部。我希望这就是你所需要的。

您当然要使用background images而不是颜色。

function onClick(){
  document.getElementById("second").style.height = "0px";
}

div{
  position: absolute;
  height: 50px;
  width: 50px;
}

#first{
  background-color: brown;
}

#second{
  background-color: beige;
    transition: height 1s;
}

<div id="first"></div>
<div id="second" onclick="onClick()"></div>

Answer 3

虽然这不是一个精确的副本，但您可以使用伪元素来创建它，根本不需要图像：

＆＃13;

＆＃13;

.square,
.mini-square {
  height: 250px;
  width: 250px;
  background: lightgray;
  position: relative;
}
.square:before {
  content: "";
  position: absolute;
  border-left: 50px solid white;
  border-right: 50px solid white;
  height: 150px;
  bottom: 0;
  left: 0;
  width: 150px;
  z-index: 8;
}
.square:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border: 125px solid white;
  border-top: none;
  border-bottom-color: transparent;
  width: 0;
  z-index: 8;
}
span {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 0;
  width: 100%;
  background: blue;
  transition: all 0.6s;
}
.square:hover span {
  height: 100%;
}
.mini-square {
  height: 140px;
  width: 110px;
  z-index: 10;
  position: absolute;
  bottom: 20px;
  left: 70px;
  background: tomato;
}

.mini-square:after {
  content: "";
  position: absolute;
  top: -70px;
  left: -20px;
  border: 75px solid transparent;
  border-top: none;
  border-bottom-color: tomato;
  width: 0;
  z-index: 8;

＆＃13;

<div class="square">
  <span></span>
  <div class="mini-square">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

这是我使用CSS3转换的方法：     

exec_comp = Function("return 1 | " + comp + ";");
// exec_comp = function () { return 1 | 0 && 0 > -1 && 0 > -2; }
exec_comp()
// true :-)

.box{
    width: 300px;
    float: left;
}
.bg {
    background: url(https://raw.githubusercontent.com/xgqfrms-GitHub/webgeeker/gh-pages/CSS3/bg-images-animation/bg1.png) no-repeat center;
    height: 250px;
    width: 100%;
    position: relative;
    overflow: hidden;
    border: 1px solid red;
}
span {
    background: url("https://raw.githubusercontent.com/xgqfrms-GitHub/webgeeker/gh-pages/CSS3/bg-images-animation/bg2.png") no-repeat;
    height: 150px;
    bottom: -150px;
    right: 0;
    left: 0;
    position: absolute;
    /*background-position: center bottom;*/
}
.bg:hover span {
    transform: translateY(-150px);
    transition: all .5s ease 0s;
}

的 demo.gif： 您可以访问以下链接，查看不同的对比演示： http://webgeeker.xyz/CSS3/bg-images-animation/