Line-through animation on hover (incomplete)

Question

I'm fairly new to css animations. I want to have an effect where if I hover over the element the line-through slowly disappears from right to left. I already gathered all of this but when the page loads the effect already begins. So when I hover over it nothing happens and I don't really know where to put the hover in the code. Also how do I make sure that when I don't hover over it anymore the line through fills back up?

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

Thanks in Advance

The question is little vague as I cannot visualize what you are going through. Please share the Codepen so that we can know better. Also I suppose, you have used the :after here. I think that you must use the :hover for the effect to occur. — Ajay Kudva, Aug 04 '18 at 14:09
Here's a gif of the problem to clarify: https://giphy.com/gifs/ujTtl5xacXpFPWz6yK/fullscreen — Zeger Caes, Aug 04 '18 at 15:26
Did you try the :hover instead of :after? Put all the animation contents in the .submenu:hover. — Ajay Kudva, Aug 04 '18 at 15:42
Can you share the project CodePen so that I can play with the code? — Ajay Kudva, Aug 04 '18 at 16:03
Thanks for taking your time with this Ajay. The animation css is all the way at the bottom: https://codepen.io/anon/pen/LBrwLa — Zeger Caes, Aug 04 '18 at 18:28

score 0 · Accepted Answer · edited Aug 06 '18 at 00:56

0

I played around with your code and I think I found the solution.

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

Here's the CodePen: https://codepen.io/AjayKudva/pen/WKKxWQ

edited Aug 06 '18 at 00:56

Pang

9,564
146
81
122

answered Aug 05 '18 at 10:27

Ajay Kudva

179
6

Thanks Ajay, one more final detail. If I want the animation to reverse when not hovering on it anymore. Should I use the :before selector? Because now when I stop hovering over it, the bar refills instantly. – Zeger Caes Aug 05 '18 at 11:14
I dont think that you can do that with only CSS. As when the webpage loads you want it line-through without any animations. Then when you hover line-through must fadeout. But again on mouseout action it must do the reverse. This will result in the following manner: When the page loads the line-through will be seen animating through the text. Is that ok with you? Also upvote and accept the answer if you found it useful. – Ajay Kudva Aug 05 '18 at 11:17

Line-through animation on hover (incomplete)

1 Answers1