Как сделать анимацию?

Question

[deadshumz]

https://shumzzzz.github.io/
При наведении на лого вк нужна анимация, то есть чтобы логотип вк отодвигался влево и появлялся текст, как такое сделать?

Answer 1

[Юрий Литвиненко]

.vklink {
overflow: hidden;
white-space: nowrap;
animation: typing 1s;
}

@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}

Comments

[deadshumz]

По завершении анимации всё становиться на 0%, а нужно чтобы анимация была на 100% пока курсор на ней.

[Евгений Голубев]

deadshumz, тся

[Юрий Литвиненко]

Ок, понял.

Если задать для .vk:hover .vklink {width: auto;}, как было у вас, то transition не будет отрабатывать.

Можно так:
.vk .vklink {
...
transition: width 3s;
}

.vk:hover .vklink {
width: 200px;
}
Но это не универсальное решение, т.к. ширина .vklink может (и будет меняться).

[Юрий Литвиненко]

https://jsfiddle.net/litdon/sp576mk8/1/

[deadshumz]

Юрий Литвиненко, логотип резко переходит в левую часть, а должен плавно