css3 animation on hover

Question

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.

Here is the full code on jsfiddle. https://jsfiddle.net/magtechpro/8auz2nx3/4/

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

Answer 1

You need to animate the width.

No need to use keyframes to do this, just add the new parameters in the hover, and adds transition to smooth animation

mark {
  background-color: transparent;
}

a span.visual , 
a span.merchandising {
    display: inline-block;
    width:0;
    opacity: 0;

    -webkit-transition: all 0.4s linear; /* Safari */
    transition: all  0.4s linear;
}

a:hover span.visual, 
a:hover span.merchandising {
  opacity: 1; 
  width:30px;
}

Working example: https://jsfiddle.net/8auz2nx3/6/

---

---

Note:

You can use easings to give a more cool animation.

To use easing choose what animation you whant from the link above and in the next page you will see in red the code to inter on the property.

---

---

See here in action.