CSS Переход при наведении аббревиатуры

Question

Я экспериментирую с HTML и CSS, но просто не могу понять, как это сделать. Допустим, у меня есть аббревиатура «AW», которая обозначает «Abcd-Wxyz». Мне нужна анимация, которая переводит остальную часть слова, начиная с первой буквы.

Я тестировал с позицией, дисплеем, видимостью и переходом, но ни один из них не работает. Чтобы выполнить работу по переходу 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

Вы не можете сделать это только с шириной атрибута, но вы можете обмануть его, используя максимальную ширину (на 0, то на авто при наведении 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; 
}