Display a CSS animation upon hovering the mouse

Question

Display a CSS animation upon hovering the mouse

I'm looking to create a unique animation that involves drawing angled and straight lines, along with displaying text from left to right upon hovering over a button. I am relatively new to this concept and would appreciate any guidance. Additionally, I'm wondering if there is a way for the text to remain visible after the animation completes.

Below is the code snippet that I have put together, which combines elements of various solutions found on 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>

html css animation

Answer 1

Answer №1

To make the text visible even after the animation ends, you will need to add or toggle a class on the div.skew element using JavaScript. Define the animation rules on that class or its child elements as shown below:

var button = document.querySelector("button.menubtn");
var skewElement = document.querySelector("div.skew");

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>

To ensure the text remains visible after the end of the animation, be sure to include animation-fill-mode: forwards on .showText, just like in the code snippet above.

Answer 2

To make the text visible even after the animation ends, you will need to add or toggle a class on the div.skew element using JavaScript. Define the animation rules on that class or its child elements as shown below:

var button = document.querySelector("button.menubtn");
var skewElement = document.querySelector("div.skew");

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>

To ensure the text remains visible after the end of the animation, be sure to include animation-fill-mode: forwards on .showText, just like in the code snippet above.

Answer 3

Answer №2

To achieve the animation effect on hover, we need to set up a hovering event for the specific element using JavaScript.

Once the event is triggered, a function is called to display the animations as required.

For simplicity, I've created a parent div to contain all the animation elements, initially hidden from view.

Upon hovering, the CSS display property of the parent element is changed to block, revealing all the animated components.

To ensure that the text remains visible after the animation, the forwards animation property retains the final state of the animation.

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>

Answer 4

To achieve the animation effect on hover, we need to set up a hovering event for the specific element using JavaScript.

Once the event is triggered, a function is called to display the animations as required.

For simplicity, I've created a parent div to contain all the animation elements, initially hidden from view.

Upon hovering, the CSS display property of the parent element is changed to block, revealing all the animated components.

To ensure that the text remains visible after the animation, the forwards animation property retains the final state of the animation.

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>

Display a CSS animation upon hovering the mouse

Answer №1

Answer №2

Similar questions

Another component's Angular event emitter is causing confusion with that of a different component

How come the overlay only appears the first time the button is clicked in JQUERY? What could be the issue here?

JavaScript: When setting focus on a DOM element, the document.activeElement is not automatically updated

Is it possible for a website to instruct a user's browser to save the entire page locally?

Can applications on Windows 8 operate using JavaScript, HTML5, and CSS3 that adhere to industry standards?

Leverage CSS to manipulate image attributes

Integrate a scrollbar seamlessly while maintaining the website's responsiveness

Complete layout photography using bootstrap 4

Use JavaScript or jQuery to implement the position absolute styling

Pressing a shortcut key will direct the focus to the select tag with the help of Angular

How can I use jQuery to set the color of every other row in a

Execute a function only once when using it in conjunction with ng-repeat in AngularJS

retrieving data in tabular form from a website

What can I do to stop my list items from dropping below the menu even when there isn't enough space?

How can I update the background color of the specified element when the text changes without triggering a postback?

Transmitting data via HTML anchor tags

Shift icon position to the right using CSS

When using $http get, it returns a "not found" error, but the direct request

When you hover over a Wordpress page, the entire text on the page will be underlined

Create a CSS path that connects two points by drawing a line