CSS叠加，淡入和过渡

Question

->两个div重叠->每个div都有一些文本。->一个可见，另一个不可见。->在两个div上的鼠标上向左滑动。->可见的淡出。->不可见的人渐渐消失。

我知道如何单独完成所有这些效果，但是无法将它们组合在一起。

我这里有一些代码，已经花了半天时间。任何帮助将不胜感激。

https://jsfiddle.net/pjdz0u7q/

.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>