Hover off on font-size and background-size - css

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.

Answer 2

You can use transform:scale(value);
Test it
.nice a {
font-size: 12px;
display:block;
-webkit-transition:all 2s ease;
-webkit-transform-origin:top left;
}
.nice a:hover {
-webkit-transform:scale(1.3);
}​

Answer 3

Here is working Demo
and the tutorial to know more about background
This is another way to do it with transforms.
.nice a { -webkit-transition: font-size .2s ease-in-out; }
.nice a:hover { -webkit-transform: scale(1.1); }
example with key frames(drawback is not all the time hover, it won't stay).
#-webkit-keyframes scalar{
from{
background-size: 40px 37px;
font-size: 22px;
}
to{
background-size: 103px 79px;
font-size: 32px;
}
}
.nice2 a{
background: skyblue;
background-image:url("http://lorempixel.com/300/200/abstract");
background-repeat:no-repeat;
background-size: 40px 37px;
font-size: 22px;
color:white;
}
.nice2 a:hover{
-webkit-animation: scalar 1s;
}
​
upadated demo with keyframes
we have seen Three ways to do it. lets decide which best for it.
Transitions which gives smooth and nice appearance.
Transforms which blurs while growing content.
Keyframes which leads to high end but...
Choice is yours!

Answer 4

My bad, this works:
/* HOVER OFF */
-webkit-transition-property: background-size, font-size;
o-transition-property: background-size, font-size;
-moz-transition-property: background-size, font-size;
transition-property: background-size, font-size;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
transition-duration: 0.5s;