Линейная анимация при наведении курсора (неполная)
Я новичок в анимации css. Я хочу добиться эффекта, при котором, если я наведу курсор на элемент, сквозная линия медленно исчезнет справа налево. Я уже все это собрал, но когда страница загружается, эффект уже начинается. Поэтому, когда я нахожу на него курсор, ничего не происходит, и я действительно не знаю, где поместить указатель в коде. Также как мне убедиться, что когда я больше не наведу на него курсор, сквозная линия снова заполнится?
@keyframes subMenu{
0% { width : 100; }
100% { width: 0; }
}
.subMenu {
position: relative;
}
.subMenu:after {
content: ' ';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: black;
animation-name: subMenu;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
Заранее спасибо
Вот гифка проблемы, чтобы прояснить: giphy.com/gifs/ujTtl5xacXpFPWz6yK/fullscreen
Вы пробовали: hover вместо: after? Поместите все содержимое анимации в .submenu: hover.
Да, но это действительно не работает, я буду продолжать пытаться
Можете ли вы поделиться проектом CodePen, чтобы я мог поиграть с кодом?
Спасибо, что нашли время с этим Аджаем. CSS анимации полностью внизу: codepen.io/anon/pen/LBrwLa
Ответы 1
Я поигрался с вашим кодом и думаю, что нашел решение.
.subMenu:after {
content: ' ';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: black;
}
.subMenu:hover:after{
animation-name: subMenu;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
Вот CodePen: https://codepen.io/AjayKudva/pen/WKKxWQ
Спасибо, Аджай, еще одна последняя деталь. Если я хочу, чтобы анимация менялась, когда я больше не нахожу на нее курсор. Стоит ли использовать селектор: before? Потому что теперь, когда я перестаю над ним зависать, полоска наполняется мгновенно.
Я не думаю, что это можно сделать только с помощью CSS. Как и при загрузке веб-страницы, вы хотите, чтобы она проходила по строкам без каких-либо анимаций. Затем при наведении курсора линия должна исчезнуть. Но опять же при выполнении действия mouseout должно происходить обратное. Это приведет к следующему: Когда страница загружается, сквозная строка будет отображаться анимированной через текст. Это нормально для тебя? Также проголосуйте и примите ответ, если вы сочли его полезным.
Вопрос немного расплывчатый, поскольку я не могу представить себе, через что вы проходите. Пожалуйста, поделитесь Codepen, чтобы мы знали лучше. Также я полагаю, вы использовали: после здесь. Я думаю, что вы должны использовать: hover, чтобы эффект появился.