Posts

Showing posts with the label css-animations

Link hover animation issue(knight rider animation)

Link hover animation issue(knight rider animation) I have created animation that runs hover the link. I have created animation using in and out key frames. But I got issue. I think this happens because of knight-rider-out animation. But I need that for mouse leave. The issue is when the page load it is running automatically. Code pen link .container { padding: 50px; max-width: 500px; } .dashBottom { padding-left: 0px; position: relative; padding-bottom: 15px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; color: black; text-decoration: none; } .dashBottom:after { position: absolute; content: ""; bottom: 0px; width: 30px; background-color: black; height: 4px; left: 0; right: auto; -webkit-animation: knight-rider-out 0.5s; animation: knight-rider-out 0.5s; animation-fill-mode: forwards; } .dashBottom:hover:after { -webkit-animation: knight-rider-in ...