How to make a build-up line every time?


Warning: count(): Parameter must be an array or an object that implements Countable in /home/styllloz/public_html/qa-theme/donut-theme/qa-donut-layer.php on line 274
0 like 0 dislike
21 views
Need to hover the cursor on the block to do a buildup of the line. In my code this happens only once: more the animations do not work. Preferably entirely in CSS. Thanks In Advance!

HTML:

CurrencyHelper


Your personal assistant in exchange rates.



CSS:
/*Line*/ .Hover .Line { background: #F5FAFF; border: 0; opacity: 0; animation-duration: 0.8 s; animation-name: Line; margin-left: 110px; margin-top: -20px; animation-play-state: paused; width: 100px; height: 3px; } /*Line animation*/ @keyframes Line { 0%{ width: 10px; } 100%{ width: 100px; } } /*Fade in animation*/ .CH .Hover{ opacity:0; transition: opacity .3s; background: rgba(30, 140, 255, 0.95); width: 100%; height: 321px; } .CH:hover .Hover{ opacity: 1; } .CH:hover .Line{ opacity: 1; animation-play-state: running; }


5aea132211241918012849.png
by | 21 views

1 Answer

0 like 0 dislike
the animation should be hung on the :hover pseudo-class , and you have class .Hover
by
110,608 questions
257,187 answers
0 comments
40,796 users