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