親がホバー状態にあるときにCSSを遷移させる子

Question

h1要素が「ホバー」状態になるたびに、h1見出しの各文字を特定の新しい位置に移動しようとしています。ポイントは、アナグラムの「チェイサー」を「検索」に表示することです

現在、マウスが見出しの上を移動すると、すべての文字が正しい場所に移動しますが、どのような種類の遷移もありません。

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トランジションを動作させるには、beforeプロパティとafterプロパティの両方を設定する必要があります。したがって、#cを0から16vwに移動させる場合は、ホバーなし状態の0に、とのホバー状態の新しい位置を初期位置として設定する必要があります。ここに表示

：

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>

はまた、左右の特性の両方のための移行を指定する必要があります。

最初のプロパティをスパン定義に設定することはできません。テキストの方向に応じてどちらか一方が優先されるためです。