Html 悬停缩写时的CSS转换

我正在试验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>

---

仅使用width属性无法做到这一点，但可以使用max width（在0处，然后在悬停zk触发器时使用auto）来欺骗它。

---

你需要使用关键帧：非常感谢，先生，使用最大宽度而不是宽度是一个天才的想法：）我有一个奇怪的错误。因为我使用了overflow:hidden，所以我必须使用“垂直对齐：中间”，否则布局会变得疯狂。仅在Chrome中，不在firefox中。抱歉，所有浏览器都会因溢出隐藏而出现布局错误。我会发给你一个截图：我想这已经解决了！垂直对齐：顶部！

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

#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;
}