Welcome to Software Development on Codidact!
Will you help us build our independent community of developers helping developers? We're small and trying to grow. We welcome questions about all aspects of software development, from design to code to QA and more. Got questions? Got answers? Got code you'd like someone to review? Please join us.
How do I get an animation from another source playing through hovering?
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.
0 answers
1 comment thread