CSS 叠加、淡入淡出和过渡

Question

-> 两个 div 重叠
-> 每个 div 都有一些文本。
-> 一个可见，另一个不可见。
-> 将鼠标悬停在两个 div 上向左滑动。
-> 可见的淡出。
-> 隐形人淡入。

我知道如何单独制作所有这些效果，但无法组合它们。

我这里有一些代码，我折腾了半天。任何帮助将不胜感激。


.main {
    position: relative;
}

.a,
.b {
    top: 0;
    left: 0;
}

.a {
    transition: .5s;
}

.a:hover {
    transform: translatex(50px);
    animation: fadeOut ease 10s;
}

.b:hover {
    transform: translatex(50px);
    animation: fadeOut ease 10s;
}

<div class="main">
    <div class="a">
        Something
    </div>
    <div class="b">
        Anything
    </div>
</div>

Answer 1

如果我理解你的任务正确 - 试试这个：

.main {
  position: relative;
  display: inline-block;
}

.a,
.b {
  top: 0;
  left: 0;
  transition: .5s;
}

.a {  
  opacity: 1;
}

.b {
  opacity: 0;
  position: absolute;
}

.main:hover .a {
  transform: translatex(50px);
  opacity: 0;
}

.main:hover .b {
  transform: translatex(50px);
  opacity: 1;
}

<div class="main">
  <div class="a">
    Something
  </div>
  <div class="b">
    Anything
  </div>

</div>

CSS 叠加、淡入淡出和过渡

CSS Overlay, Fade and Transition

css

overlay

transform

fade

slide