如何使这个静态按钮动画显示悬停时的宽度增加？

Question

我设计了一个按钮，当它徘徊时，我想要一个平滑，动画的扩展。到目前为止，它看起来真的很生涩，我无法让width顺利过渡。

Here's a JSFiddle of what I've got so far。 CSS是从LESS生成的，包含在下面。

这是我的HTML：

<div class="static-headliner">
  <i class="glyphicon glyphicon-camera"></i>
  <div class="headliner-text">Click here to see some stuff!</div>
</div>

这里是LESS代码：

@brand-primary:         rgb(22, 151, 83);
@brand-secondary:       rgb(15, 83, 46);
@brand-blended:         average(@brand-primary, @brand-secondary);

.static-headliner {
    position: fixed;
    right: .8em;
    bottom: .8em;
    background-color: @brand-secondary;
    opacity: .8;
    color: white;
    cursor: pointer;
    padding: 1em 1.5em;
    border-radius: 10em;
    font-family: 'Segoe UI Light', 'Segoe UI';
    -moz-transition: opacity .2s linear;
    -o-transition: opacity .2s linear;
    -webkit-transition: opacity .2s linear;
    transition: opacity .2s linear;

    .glyphicon {
        padding-top: .2em;
        padding-bottom: .2em;
        display: inline-block;
        font-size: 2em;
        vertical-align: middle;
    }

    .headliner-text {
        width: 0;
        white-space: nowrap;
        overflow: hidden;
        display: inline-block;
        vertical-align: middle;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
    }

    &:hover {
        opacity: 1;

        .headliner-text {
            width: auto;
            margin-left: 12px;
        }
    }
}

感谢任何帮助。感谢。