0

I styled a button that I'd like to have a smooth, animated expansion when it's hovered over. So far, it looks really jerky, and I can't get the width to transition smoothly.

Here's a JSFiddle of what I've got so far. The CSS is generated from LESS, which is included below.

Here's my HTML:

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

Here's the LESS code:

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

Any help is appreciated. Thanks.

Jacob Stamm
  • 1,660
  • 1
  • 29
  • 53
  • 1
    You cannot transition from/to a value of `auto`. It would have to be a [fixed pixel value](https://jsfiddle.net/sh2yue68/3/) (or) you can [try using `max-width`](https://jsfiddle.net/sh2yue68/4/) if you can't be sure of the exact width. – Harry Jun 04 '16 at 02:57
  • 1
    That did the trick, thanks! Started with `max-width: 0` and expanded out to a ballpark that's a few pixels wider than I need. – Jacob Stamm Jun 04 '16 at 03:05
  • You're welcome! I am closing this question because it is a dupe of the one I had linked earlier. – Harry Jun 04 '16 at 03:14

0 Answers0