当父母处于悬停状态时，CSS过渡孩子

Question

我试图将H1中的每个字母移动到特定的新位置时，每当H1元素处于"悬停"状态时。关键是要揭示Anagram的"追逐者"

当前，当鼠标徘徊在标题上时，所有字母都移至正确的位置，但没有任何过渡。

h1 {
  text-align:left;
  font-family:'Ubuntu Mono', monospace;
  font-size: 8vw;
  font-weight:400;
  margin:3vw 0;
}
.mover span {
  position:relative;
  -webkit-transition: .5s right ease;
  transition: .5s right ease;
}
.mover:hover #c {
  left:16vw;
}
.mover:hover #h {
  left:16vw;
}
.mover:hover #s {
  right:12vw;
}
.mover:hover #e {
  right:12vw;
}   
.mover:hover #r{
  right:8vw;
}

<h1 class="mover">
  <span id="c">c</span>
  <span id="h">h</span>
  <span id="a">a</span>
  <span id="s">s</span>
  <span id="e">e</span>
  <span id="r">r</span>
</h1>

如果某人可以解释为什么这已删除，并且仅使用CSS可以进行所需的效果/互动性，那将不胜感激。

Answer 1

为了使CSS过渡工作，您需要在属性之前和之后都具有一个。因此，如果您希望#c从0移动到16vw，则需要将初始位置设置为在非悬挂状态和上的0，

上16vw的新位置。

在这里显示：

h1 {
    text-align: left;
    font-family: 'Ubuntu Mono', monospace;
    font-size: 8vw;
    font-weight: 400;
    margin: 3vw 0;
}
.mover span {
    position: relative;
    -webkit-transition: .5s right ease, .5s left ease;
    transition: .5s right ease, .5s left ease;
}
#c, #h {
    left: 0;
}
#s, #e, #r {
    right: 0;
}
.mover:hover #c {
    left: 16vw;
}
.mover:hover #h {
    left: 16vw;
}
.mover:hover #s {
    right: 12vw;
}
.mover:hover #e {
    right: 12vw;
}   
.mover:hover #r {
    right: 8vw;
}

<h1 class="mover">
    <span id="c">c</span>
    <span id="h">h</span>
    <span id="a">a</span>
    <span id="s">s</span>
    <span id="e">e</span>
    <span id="r">r</span>
</h1>

您还需要指定左右属性的过渡。

请注意，您不能仅在跨度定义上设置两个初始属性，因为一个或另一个将优先（取决于文本方向）。