CSS-Übergang, wenn ich eine Abkürzung schwebe

Question

Ich experimentiere mit HTML und CSS, kann aber einfach nicht herausfinden, wie es geht. Sagen wir, ich habe eine Abkürzung "AW", die für "Abcd-Wxyz" steht. Ich möchte eine Animation, die den Rest des Wortes ab dem ersten Buchstaben rollt.

Ich habe mit Position, Anzeige, Sichtbarkeit und Transition getestet, aber keiner von ihnen funktioniert. Um CSS-Übergang zu machen, muss ich die Breite der Container anpassen. Irgendwelche Ideen wie man das richtig macht?

<header><h1>Some Heading - <span id="zk-trigger">A<span id="hide1" class="hide">bcd-</span>W<span id="hide2" class="hide">xyz</span></span> | Anything Else</h1></header> 

Ich habe mit so etwas getestet. Es funktioniert, aber ohne jede Art von Animation ..:/

header { 
    height: $generalHeight; 
    box-shadow: 2px 2px 2px #ccc; 

    h1, span { 
     font-size: 35px; 
     line-height: $generalHeight; 
     width: 960px; 
     margin: 0 auto; 
     font-weight: 400; 
     letter-spacing: 2px; 


    } 
    span { 
     color: #ff900f; 
    } 
    span#zk-trigger { 
     span.hide { 
      position: absolute; 
      width: 0px; 
      overflow: hidden; 
      visibility: hidden; 
     } 
    } 
    span#zk-trigger:hover { 
     span.hide { 
      visibility: visible; 
      position: static; 
     } 
    } 
} 

Answer 1

Sie können nicht tun, nur mit dem Attribut width, aber Sie es mit max-width Trick kann (bei 0, dann auf der Auto, wenn Sie schweben der ZK-Trigger).
Here's an exemple.

#hide1, #hide2{ 
// the base display, using the max-width trick 
    display: inline-block; 
    max-width: 0; 
    owerflow: hidden; 
    opacity: 0; 
    transition: max-width 0.2s, opacity 0.2s; 
} 

#zk-trigger:hover #hide1, #zk-trigger:hover #hide2{ 
// apply the code to #hide1 and #hide2 when #zk-trigger is hovered 
    max-width: 100px; 
    opacity: 1; 
    transition: max-width 0.2s, opacity 0.2s; 
}