2

I'd like to have a nice hover effect where I scale the width of list items slightly.

I also want to do this with an animation delay of 250ms. The problem is that the text gets stretched and shimmers.

How can one offset that effect?

I have a jsFiddle that shows the problem. It is the most noticeable in Chrome.

http://jsfiddle.net/LxywP/

Example CSS:

span {
    display: inline-block;
    background: #eee;
    border: solid 1px #ddd;
    padding: 8px 10px;
    font-size: 1.2em;
    font-weight: bold;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-transition: all 250ms;
    -webkit-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
}

span:hover { 
    background: darken(#E2F3E2, 8%);
    text-decoration: none; 
    -ms-transform: scale(1.05, 1);
    -mozilla-transform: scale(1.05, 1);
    -webkit-transform: scale(1.05, 1);
    transform: scale(1.05, 1);
}
Mike
  • 45
  • 9
Smith
  • 2,904
  • 3
  • 19
  • 25
  • Maybe try nesting another `span` inside for the text, with its own class that doesn't transform? – admdrew Nov 19 '13 at 17:23
  • 2
    For your use-case, you really don't need to use transform at all.... just change the left/right padding on hover to get the same effect (without stretching the text) – Spudley Nov 19 '13 at 17:27
  • 2
    Oh, by the way: `-mozilla-` is incorrect prefix for Firefox. Correct prefix is `-moz-`. And `-ms-` is completely unnecessary; no release version of IE ever used `-ms-` prefix for `transform`. – Spudley Nov 19 '13 at 17:28
  • Yea, I guess the padding is better for my case. Thanks everyone. – Smith Nov 19 '13 at 17:51

1 Answers1

0

As @Spudley mentioned in the comment, you shouldn't use scale since that stretches the element by definition. Instead you can add more left/right paddings to make the element wider. A problem with that is the element will be pushed to the right, you can solve that by adding "text-align: center" to its wrapper.

HTML:

<div>
    <span>This text gets stretched</span>
</div>

CSS:

div {
    text-align: center;
}

span {
    display: inline-block;
    background: #eee;
    border: solid 1px #ddd;
    padding: 8px 10px;
    font-size: 1.2em;
    font-weight: bold;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-transition: padding 250ms;
    -webkit-transition: padding 250ms;
    -o-transition: padding 250ms;
    transition: padding 250ms;
}

span:hover { 
    background: darken(#E2F3E2, 8%);
    text-decoration: none; 
    padding: 8px 20px;
}

Paste those into your jsfiddle and see the effect.

Another pro tip is to restrain from using "transition: all", specifying specific attributes to apply transition improves performance a lot. In this case you would use "transition: padding".

Xavier_Ex
  • 8,432
  • 11
  • 39
  • 55
  • Cool tip about using all. I didn't know about the performance hit. I will have to look up how to use multiple attributes in a single animation. – Smith Nov 19 '13 at 17:53
  • You can take a look at this post to see how to transition multiple attributes: http://stackoverflow.com/questions/9670075/css-transition-shorthand-with-multiple-properties – Xavier_Ex Nov 19 '13 at 18:08