css3悬停动画,悬停时的css3动画(css3 animation on hover)

I would like to make effect with css3 on hover.

I have one button let say AB when mouse hover on it. It should expand lets say A becomes ALL and B becomes BALL with the transition effect. On hover out back into there original state AB.

I achieve this effect with CSS3 but not what I am looking for.

As you can see the animation is not smooth on AB. I want smooth animation. I am stuck here.

Your help will be highly appreciate.

Many thanks

@-webkit-keyframes fadeIn {

from { opacity: 0; }

to { opacity: 1; }

}

@keyframes fadeIn {

from { opacity: 0; }

to { opacity: 1; }

}

mark {

background-color: transparent;

}

a span.visual , a span.merchandising {

display: none;

}

a:hover span.visual , a:hover span.merchandising{

display: inline-block;

-webkit-animation: fadeIn 2s;

animation: fadeIn 2s;

}