当父级处于悬停状态时，CSS转换子级

Question

当h1元素处于“悬停”状态时，我试图将h1标题中的每个字母移动到特定的新位置。州。重点是揭示anagram＆＃39; chaser＆＃39;到＆＃39;搜索＆＃39;

目前，当鼠标悬停在标题上时，所有字母都移动到正确的位置，但没有任何过渡。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果有人可以解释为什么这已经不存在了，并且如果只使用CSS可以实现所需的效果/交互性，那将非常感激。

Answer 1

为了使CSS转换起作用，您需要同时设置before和after属性。因此，如果您希望#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>

您还需要为左侧和右侧属性指定转场。

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