我怎样才能制作CSS动画

Question

我有2张图片和一张背景： （红色和棕色是图像）

（白色是背景）

当我将鼠标悬停在第一张或第二张图像上时，它会向左/右侧滑动。就像商店里的门。同时滑动（不仅一个）。

有人能帮助我吗？感谢。

Answer 1

我尝试了接受的答案，但是如果你将光标放在中心上方并且它来回反弹并且没有打开，那么它有点儿错误（在firefox中更多）。就个人而言，我会做更多这样的事情。

CODEPEN TO PLAY WITH

＆＃13;

＆＃13;

#stage {
  width: 20rem;
  height: 15rem;
  background: green;
  border: black 1px solid;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

span {
  color: white;
  font-size: 150%;
}

#left-curtain, #right-curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10rem;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#left-curtain {
  background: red;
  left: 0;
}

#right-curtain {
  background: blue;
  right: 0;
}

#stage:hover #left-curtain {
  left: -10rem;
}

#stage:hover #right-curtain {
  right: -10rem;
}

＆＃13;

<div id="stage">
  <span>PEEK - A - BOO!</span>
  <div id="left-curtain">Mouse</div>
  <div id="right-curtain">Over</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是我快速而肮脏的解决方案。它并不完美，也许其他人可以对它进行微调 - 但它确实有效。 Javascript / jQuery可能允许您提出更完整的解决方案。

希望这有帮助。

.l,
.r {
  -webkit-transition: width .35s ease-in-out;
  transition: width .35s ease-in-out;
  width: 200px;
  height: 100px;
}

.container {
  width: 400px;
}

.l {
  background-color: red;
  float: left;
}

.r {
  background-color: brown;
  float: right;
}

.container:hover div {
  width: 150px;
}

<div class='container'>
  <div class='l'>
  </div>
  <div class='r'>
  </div>
</div>