Question

我有两个相互重叠的元素，在悬停时我想要将底部元素向右移动，然后向后移动但在另一个元素的顶部，在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

我把你的笔分开了。我刚刚在动画中添加了一些brekpoints，并在悬停事件中略微改变了css。我想这就是你想要的（链接到分叉笔和下面的CSS）

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

          |0 0 0|                                      |0 0 1|
          |0 0 1|                                      |0 0 1|
          |0 0 1|                                      |0 0 1|
           _ _ _                                        _ _ _
    |0 1 0|0 0 0|0 0 0|                          |0 1 0|0 0 0|0 0 0|
    |1 0 0|0 0 0|0 0 0|                          |1 0 0|0 0 0|0 0 0|
    |1 0 0|0 0 0|0 0 0|                          |1 0 0|0 0 0|0 0 0|
           _ _ _                                        _ _ _
          |0 1 0|                                      |0 1 0|
          |0 1 0|                                      |0 1 0|
          |0 0 0|                                      |0 0 0|
 At this point the logic is wrong          But if I add 1 more block to the
  with Top->Left->Bottom order.               top grid, it'll become right.

Answer 2

很遗憾，您无法转换z-index。您可以做的一件事是转换opacity以使其显得更流畅。

类似的东西：

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

希望这有帮助！

Answer 3

好吧，我设法做了回到位置部分，但它变得有点马车，因为没有相反的：悬停，所以这将在创建div时执行。

将其更改为CSS：

    body {
  background:#cacaca;
}
.sector-panel__study{
  opacity: 0.5;
  animation:moveBack 2s backwards;
  animation-fill-mode: forwards; 
}
.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;
      animation-fill-mode: forwards; 
    }
    .sector-panel__information {
      opacity: 0.5;
      z-index: 0;
    }
  }
}

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

可以放剪切，你必须复制这个css代码并进行测试！

Answer 4

嗯，我得到的CSS唯一的解决方案是创建另一个动画，鼠标离开时播放。显然，当你加载页面时，它确实是一个动画，但那是因为它只是一个CSS解决方案：

https://codepen.io/anon/pen/YEvPNB?editors=1100

我刚刚复制了相同的动画并将值放在了后面。

@keyframes moveBack {
    100% {
        z-index: -1;
        right: 25%;
        top: 5%;
    }
    50% {
        z-index: -1;
        right: 0;
    }
    49% {
        z-index: 3;
        right: 0;
        top: 10%;
    }
    0% {
        z-index: 3;
        right: 25%;
        top: 5%;
    }
}

然后我就把这个naimation放在你的.sector-panel__study上。

&__study {
    background-size: cover;
    z-index: 0;
    position: absolute;
    top: 5%;
    right: 25%;
    animation: moveBack 1s forwards; // HERE
}

希望这有帮助。

CSS动画，前面的移动元素

4 个答案: