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.

Post History

66%

+2 −0

Q&A 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 th...

0 answers · posted 2y ago by General Sebast1an‭ · edited 2y ago by General Sebast1an‭

Question html css css-animations

#3: Post edited by

General Sebast1an‭ · 2022-04-02T11:37:34Z (over 2 years ago)

Copy Link

Raw

Markdown

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.

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.

#2: Post edited by

General Sebast1an‭ · 2022-04-02T04:46:22Z (over 2 years ago)

Copy Link

Raw

Markdown

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?~~

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.

#1: Initial revision by

General Sebast1an‭ · 2022-04-02T04:01:07Z (over 2 years ago)

Copy Link

Raw

Markdown

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?

html css css-animations

Communities

Post History