Show Css animation when hover over mouse

Question

I want to show an animation of drawing an angled and straight line and to show my text from left to right when hovering over a button and I am fairly new at this. also is there a way for my text to stay and not go away after animation finishes?

Here is my code, the code is a combination of other answers from stack overflow.

 .skew { position: relative; margin: 100px; width: 0; height: 2px; background: #f00; transform-origin: 0 100%; transform: rotate(-45deg); animation: draw 0.5s linear; animation-fill-mode: forwards; }.line { position: absolute; left: 100%; top: 0; content: ''; width: 0; height: 2px; background: #f00; transform-origin: 0 100%; transform: rotate(45deg); animation: drawLine 0.7s linear; animation-delay: 0.5s; animation-fill-mode: forwards; }.showText { animation: showText 2s; position: relative; top: -17px; left: 15px; opacity: 0; } @keyframes showText { 0% { opacity: 0; transform: translateX(-20px); } 50% { opacity: 0; } 100% { opacity: 1; transform: translateX(0); } } @keyframes draw { 0% { width: 0px; } 100% { width: 100px; } } @keyframes drawLine { 0% { width: 0px; } 100% { width: 100px; } }

 <div> <button class="menubtn">hover over me</button> </div> <div class="skew"> <div class="line"> <div class="showText">menu item</div> </div> </div>

Answer 1

You need to add/toggle a class on the div.skew element with Javascript, and define animation rules on that class or children of elements with that class, like so:

 var button = document.querySelector("button.menubtn"); //Select the button var skewElement = document.querySelector("div.skew"); //Select the 'skew' element button.onmouseover = function(){ skewElement.classList.toggle("startAnimation"); }

 .skew { position: relative; margin: 100px; width: 0; height: 2px; background: #f00; transform-origin: 0 100%; transform: rotate(-45deg); }.skew.startAnimation { animation: draw 0.5s linear; animation-fill-mode: forwards; }.line { position: absolute; left: 100%; top: 0; content: ''; width: 0; height: 2px; background: #f00; transform-origin: 0 100%; transform: rotate(45deg); }.startAnimation.line { animation: drawLine 0.7s linear; animation-delay: 0.5s; animation-fill-mode: forwards; }.showText { opacity: 0; position: relative; top: -17px; left: 15px; }.startAnimation.showText { animation: showText 2s; animation-fill-mode: forwards; } @keyframes showText { 0% { opacity: 0; transform: translateX(-20px); } 50% { opacity: 0; } 100% { opacity: 1; transform: translateX(0); } } @keyframes draw { 0% { width: 0px; } 100% { width: 100px; } } @keyframes drawLine { 0% { width: 0px; } 100% { width: 100px; } }

 <div> <button class="menubtn">hover over me</button> </div> <div class="skew"> <div class="line"> <div class="showText">menu item</div> </div> </div>

In order to have the text visible even after animation's end, you have to specify animation-fill-mode: forwards on .showText , like I have done in the snippet above.

Answer 2

To get the animation done on hovering, first we have to create an event for hovering for that particular element using javascript

Then call a function when that event is triggered, for you it will be displaying some animations

Just for simplicity, i just made a parent div for your entire animation elements, and not displaying initially

Later on hovering, we change the css display property of that parent element to block which will display all of your animated elements

Also to make sure your text stays after animation, there is an animation property called forwards which will keep your final animation state for the later time

 var hvrbtn=document.getElementById("hvrbtn"); hvrbtn.onmouseover=()=>{ var anim=document.getElementById("anim"); anim.style.display="block"; };

 .animated{ display:none; }.skew { position: relative; margin: 100px; width: 0; height: 2px; background: #f00; transform-origin: 0 100%; transform: rotate(-45deg); animation: draw 0.5s linear; animation-fill-mode: forwards; }.line { position: absolute; left: 100%; top: 0; content: ''; width: 0; height: 2px; background: #f00; transform-origin: 0 100%; transform: rotate(45deg); animation: drawLine 0.7s linear; animation-delay: 0.5s; animation-fill-mode: forwards; }.showText { animation: showText 2s forwards; position: relative; top: -17px; left: 15px; opacity: 0; } @keyframes showText { 0% { opacity: 0; transform: translateX(-20px); } 50% { opacity: 0; } 100% { opacity: 1; transform: translateX(0); } } @keyframes draw { 0% { width: 0px; } 100% { width: 100px; } } @keyframes drawLine { 0% { width: 0px; } 100% { width: 100px; } }

 <div> <button class="menubtn" id="hvrbtn">hover over me</button> </div> <div class="animated" id="anim"> <div class="skew"> <div class="line"> <div class="showText">menu item</div> </div> </div> <div>