Hover animation using CSS is a great way to add interactivity

Question

Hover animation using CSS is a great way to add interactivity

I'm trying to create an animation in a moving box that flips upside down when the mouse is raised. I've attempted to use keyframes and hover to achieve this effect, but it's not working as expected.

Any suggestions on how to make it work?

#www{
    background-color: black;
    position: absolute;
    left: 0;
    top: 0;
    animation: www 5s infinite;
	transition: 1s;
}
#www:hover{
    transform: rotate(180deg);
}
@keyframes www{
    0% {
        transform: translateX(0vw);
    }
    50% {
        transform: translateX(50vw);
    }
    100% {transform: translateX(0vw);}
}

<div class="box" id="www">WWW</div>

html css

Answer 1

Answer №1

To apply different transformations to the same element, you can use a container since different triggers such as hover and automatic cannot achieve this in one element.

The styles below are for demonstration purposes only; feel free to modify them according to your requirements and add a transparent background if desired.

function func() {
  document.getElementById("www").style.transform = "rotate(180deg)"
}

#www {
  background-color: black;
  transition: 1s transform;
  animation: www 10s infinite;
  width: fit-content;
}

@keyframes www {
  0% {
    transform: translateX(0vw);
  }
  50% {
    transform: translateX(50vw);
  }
  100% {
    transform: translateX(0vw);
  }
}

.box1 {
  transition: 1s;
  background-color: red;
  margin-top: 100px;
  width: fit-content;
}

.box1:hover {
  transform: rotate(180deg)
}

<div class="box" id="www" onclick="func()">
  <div class="box1">WWW</div>
</div>

Answer 2

To apply different transformations to the same element, you can use a container since different triggers such as hover and automatic cannot achieve this in one element.

The styles below are for demonstration purposes only; feel free to modify them according to your requirements and add a transparent background if desired.

function func() {
  document.getElementById("www").style.transform = "rotate(180deg)"
}

#www {
  background-color: black;
  transition: 1s transform;
  animation: www 10s infinite;
  width: fit-content;
}

@keyframes www {
  0% {
    transform: translateX(0vw);
  }
  50% {
    transform: translateX(50vw);
  }
  100% {
    transform: translateX(0vw);
  }
}

.box1 {
  transition: 1s;
  background-color: red;
  margin-top: 100px;
  width: fit-content;
}

.box1:hover {
  transform: rotate(180deg)
}

<div class="box" id="www" onclick="func()">
  <div class="box1">WWW</div>
</div>

Hover animation using CSS is a great way to add interactivity

Answer №1

Similar questions

Manage form submission seamlessly without redirecting. Capture information without needing to prevent the default action, then proceed with redirection. Avoid redirecting when using preventDefault, but be aware that data may not

How to properly adjust image size in a flex-direction column layout - tips and solutions

Ways to expand the dimensions of a Popup while including text

Making lightbox/dhtml appear in front of flash

Whenever I create a new JavaScript application, the CSS files do not seem to reflect the most recent changes

Enhance video playback by eliminating accidental scrolling through the space bar

Tips on how to showcase list items in a horizontal manner while maintaining consistent spacing and ensuring they are

Having issues with floats in Bootstrap?

The alignment of the table appears off on Internet Explorer, while it is perfectly centered on all other web

Eliminate placeholder text when the tab key is pressed

Steps to eliminate the quotation marks

The issue with mCustomScrollbar's "scrollTo" function not functioning properly has been detected within a single-page application

The 'id' field was anticipating a numerical value, but instead received 'bidding'

Creating a three-column layout in HTML5 with resizable left and center columns, and a fixed right column

Extracting information from console output and displaying it in a table with angular2

Animation that responds to scrolling movements

Using Javascript to add hovering effects that demonstrate sophistication and style

Retrieve isolated scope of directive from transcluded content

Initiating a click function for hyperlink navigation

Is it feasible to utilize Socket.io and Express in conjunction with templates without the need for routes?