Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Notifications
Mark all as read
Q&A

How do I get an animation from another source playing through hovering?

+2
−0

I was tasked with an assignment where I should get a box to move to the 4 corners of the viewport by hovering on a button. Most of the code is already finished except for figuring out how to get the animation running from another source, since I want only the box chosen to move and not the button. I might be dumb or something, but I still haven't figured it out.

I set up the following CSS in styles.css:

@keyframes Square {
  0% {
    top: 200px; left: 525px;
  }
  16% {
    top: 0px; left: 0px;
  }
  33% {
    top: 0px; left: 1050px;
  }
  50% {
    top: 400px; left: 1050px;
  }
  66% {
    top: 400px; left: 0px;
  }
  83% {
    top: 0px; left: 0px;
  }
  100% {
    top: 200px; left: 525px;
  }
}

.ani-square {
  background-color: blue;
  position: relative;
  top: 200px;
  left: 525px;
  width: 200px;
  height: 200px;
  animation-name: Square;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

Then used it on box.html:

<!DOCTYPE html>

<html>
  <head>
    <title>Box</title>
    <link rel="stylesheet" href="styles.css">
  </head>

  <body>
    <div class="ani-square"></div>
  </body>
</html>

Since I can't figure out the button yet, I haven't placed it in the HTML code. Is there a way to get animation running by hovering onto another block?

Edit: What I wanted to do is to hover on the button then the animation starts playing. Once I hover again, the animation stops. Please include that, or not if I might be able to figure that one out.

Edit 2: Okay, screw that idea. I thought that to make things easier, the concept for the button is that once you hover on it, it plays, and if not, it stops. Simple. No more complexities, except for the button getting linked with the box.

Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

1 comment thread

CSS combinators, perhaps? (8 comments)

0 answers

Sign up to answer this question »

This community is part of the Codidact network. We have other communities too — take a look!

You can also join us in chat!

Want to advertise this community? Use our templates!

Like what we're doing? Support us! Donate