Question

I am trying to realise a nice Hover Off effect using CSS. There is a pretty good example here, but I can’t reproduce this with the properties background-size and font-size.

The effect is simply to zoom in the image and the text on mouse over and come back to the original state on hover off but in a clean way (using -webkit-transition). This code fails:

.nice a {
    background:  url(../my_image.png) no-repeat;
    background-size: 40px 37px;
    font-size: 12px;

    /* HOVER OFF */
    -webkit-transition: background-size 2s;
    -webkit-transition: font-size 2s;
}

.nice a:hover{
    background: url(../my_image.png) no-repeat ;
    background-size: 43px 39px;
    font-size: 13px;

    /* HOVER ON */
    -webkit-transition: background-size 2s;
    -webkit-transition: font-size 2s;
}

Any ideas?

Answer 1

I think the problem, with the code you provided, is there aren’t enough ‘steps’ or ‘keyframes’ for the animation to run smoothly.

See this demo: http://dabblet.com/gist/3763579.
The box using your properties[one on the right], has 2 seconds on the clock to animate just one or two pixels, so there’d be an apparent delay before the artifacts jump to the next pixel. Same with animating back to place, hence the choppy, un-smooth transition.