Jquery CSS关键动画：如何使图像正确地展开和收缩？

下面是一个显示CSS关键点动画的小提琴：

我试图让图像增长并填充由一些交互（如悬停或点击并按住）触发的大部分窗口。之后，我希望图像收缩回它在页面上的原始位置

这有两个问题： 1.图像会向外展开，但会从页面的左上角展开。我希望它能从原来的位置生长。 2.执行收缩动画时，图像将折叠。你所看到的只是边界。我如何避免这种情况，只看到图像缩小

我错过了什么

HTML:

---

为此，您必须硬编码#div2的“left”和“top”值

应改为

#div2 {
  position: absolute;
  left: 300px;
  top: 110px;
  background-size: 50% 100%;
}

---

请看我更新的小提琴

你到底想完成什么？你的html说div2在hover上做东西，但是你的css把它作为

：active

。我不知道你的目标是什么。很抱歉标记的评论会误导你。这是一个遗迹。我想要的是点击并按住，悬停，我真的不关心一些互动，使图像扩大和缩小的方式，我在上面的问题中陈述。这有用吗？

div {
  border: 1px dashed;
  width: 100px;
  height: 50px;
  background: url(http://www.terrystickels.com/db_3squaresto8squares5.jpg) no-repeat center center;
  -webkit-transition: .25s;
  -moz-transition: .25s;
  -o-transition: .25s;
  -ms-transition: .25s;
  transition: .25s;
}
#div2 {
  position: static;
  float: right;
  background-size: 50% 100%;
}
#div2:active {
  background-color: rgb(0, 0, 0);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: fixed;
  background-size: contain;
}

#div2 {
  position: static;
  float: right;
  background-size: 50% 100%;
}

#div2 {
  position: absolute;
  left: 300px;
  top: 110px;
  background-size: 50% 100%;
}