CSS略語をホバリングするときの遷移

Question

私はHTMLとCSSを試していますが、その方法を理解できません。 「Abcd-Wxyz」を表す略語「AW」があるとします。最初の文字から始まる残りの単語をロールバックするアニメーションが必要です。

私は位置、表示、視認性、およびトランジションでテストしましたが、いずれも機能しませんでした。 CSSを動かすには、コンテナの幅を調整する必要があります。どのように適切な方法でこれを行うにはどのようなアイデア？

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

私はこのようなものでテストしました。これは、アニメーションのいずれかの種類なしではなく動作します..：/

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

あなたが唯一のwidth属性であることを行うことはできませんが、あなたがホバーしたときに、その後、自動で、0時（最大幅を使用してそれをだますことができますzkトリガ）。
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; 
}