CSS Transition when hovering an abbreviation

Question

I'm experimenting with HTML and CSS but just can'T figure out how to do it. Let's say I have an abbrevation "AW" which stands for "Abcd-Wxyz". I want an animation that rolls the rest of the word beginning at the first letter.

I tested with position, display, visiblity and transision but none of them works. To make CSS transition work I need to adjust the width of the containers. Any ideas how to do this in an properly way?

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

I tested with something like this. It works but without any kind of 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

You can't do that with only the width attribute, but you can trick it using max-width (at 0, then at auto when you hover the zk-trigger).
Here's an exemple.

#hide1, #hide2{
// the base display, using the max-width trick
  display: inline-block;
  max-width: 0;
  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;
}