css3 анимация при зависании

Question

Я хотел был бы сделать эффект с css3 на зависании.

У меня есть одна кнопка, скажем, AB, когда наведите курсор мыши на нее. Он должен расширяться, скажем, А становится ALL, а B становится BALL с эффектом перехода. При входе в исходное состояние AB.

Я достигаю этого эффекта с помощью CSS3, но не для того, что я ищу.

Вот полный код jsfiddle. https://jsfiddle.net/magtechpro/8auz2nx3/4/

Как вы можете видеть, анимация не является гладкой на AB. Я хочу гладкую анимацию. Я застрял здесь.

Ваша помощь будет высоко оценена.

Большое спасибо

@-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

Вы должны анимировать ширину.

Нет необходимости использовать ключевые кадры, чтобы сделать это, просто добавить новые параметры в парении, и добавляет transition сглаживать анимацию

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

Рабочий пример: https://jsfiddle.net/8auz2nx3/6/

---

---

Примечание :

Вы можете использовать easings, чтобы дать более крутая анимация.

Чтобы использовать смягчение, выберите, какую анимацию вы хотите увидеть по ссылке выше и на следующей странице вы увидите красным цветом код для взаимодействия с этим свойством.

---

---

See here in action.