javascript - CSS动画，将元素移到前面

Question

我有 2 个相互重叠的元素，在悬停时我想将底部元素设置为动画，然后向左移动，但在另一个元素的顶部，在 mouseleave 上，我希望它恢复为默认设置状态。我有一些东西可以工作，只是不透明度问题使它变得非常有问题并且不像我想要的那样流畅...

https://codepen.io/liamgallagher/pen/vWrYOe?editors=1100

CSS

body {
  background:#cacaca;
}

.sector-card {
  position:relative;
  width:50%;
  .sector-panel {
    width:50%;
    display:block;
    height:300px;
    &__information {
      background:#fff;
      z-index:1;
      position:relative;       
    }
    &__study {
      background-size:cover;
      z-index:0;
      position:absolute;
      top:15%;
      right:25%;
    }
  }
  &:hover {
    .sector-panel__study {
      animation:moveFront 2s forwards;
    }
  }
}

@keyframes moveFront {
  0%   { right:25%; }
  50% {z-index:3; right:0;}
  100% { opacity: 1; right:25%;}
}

HTML

<div class="sector-card">
  <div class="sector-panel sector-panel__information">
    <h2>Big Data</h2>
    <p>Lorem ipsum oosh</p>
  </div>
  <div class="sector-panel sector-panel__study" style="background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDvM3R_A9_W32EdH7pqK-CgCg9fSLcLoXi5EbV_D0CxtrJpXYn');">
    <h2>case study</h2>
  </div>
</div>

Answer 1

我叉了你的笔。我只是在动画中添加了一些断点，并在悬停事件上稍微更改了 css。我想这就是你想要的(链接到下面的 fork 笔和 css)

https://codepen.io/ecglover8/pen/qVKBxX

body {
  background:#cacaca;
}

.sector-card {
  position:relative;
  width:50%;
  .sector-panel {
    width:50%;
    display:block;
    height:300px;
    &__information {
      background:#fff;
      z-index:1;
      position:relative;       
    }
    &__study {
      background-size:cover;
      z-index:0;
      position:absolute;
      top:15%;
      right:25%;
    }
  }
  &:hover {
    .sector-panel__study {
      animation:moveFront 2s forwards;
      z-index:3;
    }
  }
}

@keyframes moveFront {
  0%   { z-index:-1; right:25%; }
  49% {z-index:-1;right:0;}
  50% {z-index:3;right:0;}
  100% {right:25%;}
}