Все сервисы Хабра
Сообщество IT-специалистов
Ответы на любые вопросы об IT
Профессиональное развитие в IT
Закрыть
Задать вопрос
deadshumz
@deadshumz
HTML
CSS
Bootstrap
Как сделать анимацию?
https://shumzzzz.github.io/
При наведении на лого вк нужна анимация, то есть чтобы логотип вк отодвигался влево и появлялся текст, как такое сделать?
Вопрос задан
более трёх лет назад
105 просмотров
Комментировать
Подписаться
1
Простой
Комментировать
Facebook
Вконтакте
Twitter
Решения вопроса
0
Пригласить эксперта
Ответы на вопрос
1
Юрий Литвиненко
@Litvinenko-Yury
.vklink {
overflow: hidden;
white-space: nowrap;
animation: typing 1s;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
Ответ написан
более трёх лет назад
4
комментария
Нравится
4
комментария
Facebook
Вконтакте
Twitter
deadshumz
@deadshumz
Автор вопроса
По завершении анимации всё становиться на 0%, а нужно чтобы анимация была на 100% пока курсор на ней.
Написано
более трёх лет назад
Юрий Литвиненко
@Litvinenko-Yury
Ок, понял.
Если задать для .vk:hover .vklink {width: auto;}, как было у вас, то transition не будет отрабатывать.
Можно так:
.vk .vklink {
...
transition: width 3s;
}
.vk:hover .vklink {
width: 200px;
}
Но это не универсальное решение, т.к. ширина .vklink может (и будет меняться).
Написано
более трёх лет назад
Юрий Литвиненко
@Litvinenko-Yury
https://jsfiddle.net/litdon/sp576mk8/1/
Написано
более трёх лет назад
deadshumz
@deadshumz
Автор вопроса
Юрий Литвиненко
, логотип резко переходит в левую часть, а должен плавно
Написано
более трёх лет назад
Ваш ответ на вопрос
Войдите, чтобы написать ответ
Войти через центр авторизации
Похожие вопросы
HTML
+3 ещё
Простой
Как правильно подключить шрифты в 1C-Битрикс и почему у меня не получается?
1 подписчик
19 часов назад
123 просмотра
1
ответ
CSS
Простой
Как убрать фон в input после выбора?
1 подписчик
21 час назад
67 просмотров
0
ответов
HTML
+1 ещё
Простой
Как соединить кнопку и форму вместе?
1 подписчик
вчера
82 просмотра
1
ответ
HTML
+1 ещё
Простой
Как настроить размер видео из Вконтакте?
2 подписчика
вчера
1125 просмотров
1
ответ
JavaScript
+2 ещё
Простой
Как поменять свет линии при нажатии?
1 подписчик
30 июн.
140 просмотров
1
ответ
HTML
+1 ещё
Простой
Как выложить игру в Яндекс игры?
1 подписчик
30 июн.
160 просмотров
1
ответ
JavaScript
+1 ещё
Простой
Как создать скрипт удаления элемента HTML используя Tempermonkey?
1 подписчик
29 июн.
100 просмотров
1
ответ
JavaScript
+1 ещё
Простой
Как реализовать выдвигающийся из айтема блок(при нажатии на плюс)?
1 подписчик
29 июн.
76 просмотров
0
ответов
HTML
+1 ещё
Простой
Как выровнить в колонку фотки как на макете?
1 подписчик
28 июн.
92 просмотра
1
ответ
CSS
+1 ещё
Простой
Как сделать чтобы блок с border-dashed постепенно заполнялся border-solid?
2 подписчика
28 июн.
1109 просмотров
1
ответ
Показать ещё
Загружается…
Вакансии с Хабр Карьеры
Frontend-разрабодчик
MyAdsTarget
от 150 000 ₽
Frontend разработчик на React
SkillsRock
•
Таганрог
от 60 000 до 90 000 ₽
Front-End developer (JavaScript, jQuery)
Karma8
от 150 000 до 320 000 ₽
Минуточку внимания
Войдите на сайт
Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации
Закрыть
Реклама