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

Question

I am trying to move each letter in an h1 heading to a specific new position whenever the h1 element is in the 'hover' state. The point is to reveal the anagram 'chaser' to 'search'

Currently when the mouse hovers over the heading, all of the letters move to the correct place, but without any kind of transition.

 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> 

If someone could explain why this is defunct, and if the desired effect/interactivity is possible with just CSS it would be much appreciated.

Answer 1

In order for a CSS transition to work, you need to have both a before and after property set. So if you want #c to move from 0 to 16vw , you need to set the initial location to 0 on the non-hover state and the new location of 16vw on the hover state.

Showing here:

 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> 

You also need to specify transition for both the left and right properties.

Note that you can't just set both initial properties on the span definition because one or the other will take precedence (depending on the text direction).