'How to make multiple spinning divs slide to the center of the browser?
<html>
<head>
<meta name="viewport" content="width-device-width, initial-scale=1.0" >
<title>Spinner</title>
<style>
body {
background-color: black;
}
.div {
height: 200px;
width: 200px;
background-color: red;
border-radius: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M12 0h18v6h6v6h6v18h-6v6h-6v6H12v-6H6v-6H0V12h6V6h6V0zm12 6h-6v6h-6v6H6v6h6v6h6v6h6v-6h6v-6h6v-6h-6v-6h-6V6zm-6 12h6v6h-6v-6zm24 24h6v6h-6v-6z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.div2 {
height: 200px;
width: 200px;
background-color: rgb(0, 127, 255);
border-radius: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M12 0h18v6h6v6h6v18h-6v6h-6v6H12v-6H6v-6H0V12h6V6h6V0zm12 6h-6v6h-6v6H6v6h6v6h6v6h6v-6h6v-6h6v-6h-6v-6h-6V6zm-6 12h6v6h-6v-6zm24 24h6v6h-6v-6z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.div3 {
height: 200px;
width: 200px;
background-color: rgb(9, 255, 0);
border-radius: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M12 0h18v6h6v6h6v18h-6v6h-6v6H12v-6H6v-6H0V12h6V6h6V0zm12 6h-6v6h-6v6H6v6h6v6h6v6h6v-6h6v-6h6v-6h-6v-6h-6V6zm-6 12h6v6h-6v-6zm24 24h6v6h-6v-6z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
animation-name: spin2;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.div4 {
height: 200px;
width: 200px;
background-color: gold;
border-radius: 100%;
position: absolute;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M12 0h18v6h6v6h6v18h-6v6h-6v6H12v-6H6v-6H0V12h6V6h6V0zm12 6h-6v6h-6v6H6v6h6v6h6v6h6v-6h6v-6h6v-6h-6v-6h-6V6zm-6 12h6v6h-6v-6zm24 24h6v6h-6v-6z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
animation-name: spin2;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
@keyframes spin2 {
from {
transform:rotate(0deg);
}
to {
transform:rotate(-360deg);
}
}
.center {
position: absolute;
left: 10%;
top: 30%;
transform: translate(-50%, -50%);
}
.center2 {
position: absolute;
left: 30%;
top: 30%;
transform: translate(-50%, -50%);
}
.center3 {
position: absolute;
left: 50%;
top: 30%;
transform: translate(-50%, -50%);
}
.center4 {
position: absolute;
left: 70%;
top: 30%;
transform: translate(-50%, -50%);
}
#div {
transition: 1s;
}
#div2 {
transition: 1s;
}
#div3 {
transition: 1s;
}
#div4 {
transition: 1s;
}
</style>
<script>
let i = 0;
function change() {
let doc = document.getElementById("div");
let color = ["red", "rgb(191, 0, 255)"];
doc.style.backgroundColor = color[i];
i = (i + 1) % color.length;
}
setInterval(change, 1000);
</script>
<script>
let i2 = 0;
function change() {
let doc = document.getElementById("div2");
let color = ["rgb(0, 127, 255)", "rgb(255, 204, 51)"];
doc.style.backgroundColor = color[i2];
i2 = (i2 + 1) % color.length;
}
setInterval(change, 1000);
</script>
<script>
let i3 = 0;
function change() {
let doc = document.getElementById("div3");
let color = ["rgb(9, 255, 0)", "rgb(250, 214, 165)"];
doc.style.backgroundColor = color[i3];
i3 = (i3 + 1) % color.length;
}
setInterval(change, 1000);
</script>
<script>
let i4 = 0;
function change() {
let doc = document.getElementById("div4");
let color = ["gold", "rgb(141, 153, 163)"];
doc.style.backgroundColor = color[i4];
i4 = (i4 + 1) % color.length;
}
setInterval(change, 1000);
</script>
</head>
<body>
<div id="div" class="div center"></div>
<div id="div2" class="div2 center2"></div>
<div id="div3" class="div3 center3"></div>
<div id="div4" class="div4 center4 "></div>
</body>
</html>I want to make all the divs slide into a line at the center of the browser, I tried to do it with keyframe and it slides in but not in the center, and the div stops spinning. I don't know what else to do. I tried to find something related to help me but I couldn't find anything so I would be thankful if you could help me. Here is my code.
<html>
<head>
<meta name="viewport" content="width-device-width, initial-scale=1.0" >
<title>Spinner</title>
<style>
body {
background-color: black;
}
.div {
height: 200px;
width: 200px;
background-color: red;
border-radius: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M12 0h18v6h6v6h6v18h-6v6h-6v6H12v-6H6v-6H0V12h6V6h6V0zm12 6h-6v6h-6v6H6v6h6v6h6v6h6v-6h6v-6h6v-6h-6v-6h-6V6zm-6 12h6v6h-6v-6zm24 24h6v6h-6v-6z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.div2 {
height: 200px;
width: 200px;
background-color: rgb(0, 127, 255);
border-radius: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M12 0h18v6h6v6h6v18h-6v6h-6v6H12v-6H6v-6H0V12h6V6h6V0zm12 6h-6v6h-6v6H6v6h6v6h6v6h6v-6h6v-6h6v-6h-6v-6h-6V6zm-6 12h6v6h-6v-6zm24 24h6v6h-6v-6z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.div3 {
height: 200px;
width: 200px;
background-color: rgb(9, 255, 0);
border-radius: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M12 0h18v6h6v6h6v18h-6v6h-6v6H12v-6H6v-6H0V12h6V6h6V0zm12 6h-6v6h-6v6H6v6h6v6h6v6h6v-6h6v-6h6v-6h-6v-6h-6V6zm-6 12h6v6h-6v-6zm24 24h6v6h-6v-6z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
animation-name: spin2;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.div4 {
height: 200px;
width: 200px;
background-color: gold;
border-radius: 100%;
position: absolute;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M12 0h18v6h6v6h6v18h-6v6h-6v6H12v-6H6v-6H0V12h6V6h6V0zm12 6h-6v6h-6v6H6v6h6v6h6v6h6v-6h6v-6h6v-6h-6v-6h-6V6zm-6 12h6v6h-6v-6zm24 24h6v6h-6v-6z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
animation-name: spin2;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.slide-in {
animation-name: slide-in;
animation-duration: 3000ms;
animation-iteration-count: 1;
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
@keyframes spin2 {
from {
transform:rotate(0deg);
}
to {
transform:rotate(-360deg);
}
}
@keyframes slide-in {
from {
left: 150%;
top: 30%;
}
to {
left: 70%;
top: 30%;
}
}
.center {
position: absolute;
left: 10%;
top: 30%;
transform: translate(-50%, -50%);
}
.center2 {
position: absolute;
left: 30%;
top: 30%;
transform: translate(-50%, -50%);
}
.center3 {
position: absolute;
left: 50%;
top: 30%;
transform: translate(-50%, -50%);
}
.center4 {
position: absolute;
left: 70%;
top: 30%;
transform: translate(-50%, -50%);
}
#div {
transition: 1s;
}
#div2 {
transition: 1s;
}
#div3 {
transition: 1s;
}
#div4 {
transition: 1s;
}
</style>
<script>
let i = 0;
function change() {
let doc = document.getElementById("div");
let color = ["red", "rgb(191, 0, 255)"];
doc.style.backgroundColor = color[i];
i = (i + 1) % color.length;
}
setInterval(change, 1000);
</script>
<script>
let i2 = 0;
function change() {
let doc = document.getElementById("div2");
let color = ["rgb(0, 127, 255)", "rgb(255, 204, 51)"];
doc.style.backgroundColor = color[i2];
i2 = (i2 + 1) % color.length;
}
setInterval(change, 1000);
</script>
<script>
let i3 = 0;
function change() {
let doc = document.getElementById("div3");
let color = ["rgb(9, 255, 0)", "rgb(250, 214, 165)"];
doc.style.backgroundColor = color[i3];
i3 = (i3 + 1) % color.length;
}
setInterval(change, 1000);
</script>
<script>
let i4 = 0;
function change() {
let doc = document.getElementById("div4");
let color = ["gold", "rgb(141, 153, 163)"];
doc.style.backgroundColor = color[i4];
i4 = (i4 + 1) % color.length;
}
setInterval(change, 1000);
</script>
</head>
<body>
<div id="div" class="div center"></div>
<div id="div2" class="div2 center2"></div>
<div id="div3" class="div3 center3"></div>
<div id="div4" class="div4 center4 slide-in"></div>
</body>
</html>
Thanks.
Solution 1:[1]
<html>
<head>
<meta name="viewport" content="width-device-width, initial-scale=1.0" >
<title>Spinner</title>
<style>
body {
background-color: black;
}
.div {
height: 200px;
width: 200px;
background-color: red;
border-radius: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M12 0h18v6h6v6h6v18h-6v6h-6v6H12v-6H6v-6H0V12h6V6h6V0zm12 6h-6v6h-6v6H6v6h6v6h6v6h6v-6h6v-6h6v-6h-6v-6h-6V6zm-6 12h6v6h-6v-6zm24 24h6v6h-6v-6z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.div2 {
height: 200px;
width: 200px;
background-color: rgb(0, 127, 255);
border-radius: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M12 0h18v6h6v6h6v18h-6v6h-6v6H12v-6H6v-6H0V12h6V6h6V0zm12 6h-6v6h-6v6H6v6h6v6h6v6h6v-6h6v-6h6v-6h-6v-6h-6V6zm-6 12h6v6h-6v-6zm24 24h6v6h-6v-6z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.div3 {
height: 200px;
width: 200px;
background-color: rgb(9, 255, 0);
border-radius: 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M12 0h18v6h6v6h6v18h-6v6h-6v6H12v-6H6v-6H0V12h6V6h6V0zm12 6h-6v6h-6v6H6v6h6v6h6v6h6v-6h6v-6h6v-6h-6v-6h-6V6zm-6 12h6v6h-6v-6zm24 24h6v6h-6v-6z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
animation-name: spin2;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.div4 {
height: 200px;
width: 200px;
background-color: gold;
border-radius: 100%;
position: absolute;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M12 0h18v6h6v6h6v18h-6v6h-6v6H12v-6H6v-6H0V12h6V6h6V0zm12 6h-6v6h-6v6H6v6h6v6h6v6h6v-6h6v-6h6v-6h-6v-6h-6V6zm-6 12h6v6h-6v-6zm24 24h6v6h-6v-6z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
animation-name: spin2;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
@keyframes spin2 {
from {
transform:rotate(0deg);
}
to {
transform:rotate(-360deg);
}
}
.center {
position: absolute;
left: 10%;
top: 30%;
transform: translate(-50%, -50%);
}
.center2 {
position: absolute;
left: 30%;
top: 30%;
transform: translate(-50%, -50%);
}
.center3 {
position: absolute;
left: 50%;
top: 30%;
transform: translate(-50%, -50%);
}
.center4 {
position: absolute;
left: 70%;
top: 30%;
transform: translate(-50%, -50%);
}
#div {
transition: 1s;
}
#div2 {
transition: 1s;
}
#div3 {
transition: 1s;
}
#div4 {
transition: 1s;
}
</style>
<script>
let i = 0;
function change() {
let doc = document.getElementById("div");
let color = ["red", "rgb(191, 0, 255)"];
doc.style.backgroundColor = color[i];
i = (i + 1) % color.length;
}
setInterval(change, 1000);
</script>
<script>
let i2 = 0;
function change() {
let doc = document.getElementById("div2");
let color = ["rgb(0, 127, 255)", "rgb(255, 204, 51)"];
doc.style.backgroundColor = color[i2];
i2 = (i2 + 1) % color.length;
}
setInterval(change, 1000);
</script>
<script>
let i3 = 0;
function change() {
let doc = document.getElementById("div3");
let color = ["rgb(9, 255, 0)", "rgb(250, 214, 165)"];
doc.style.backgroundColor = color[i3];
i3 = (i3 + 1) % color.length;
}
setInterval(change, 1000);
</script>
<script>
let i4 = 0;
function change() {
let doc = document.getElementById("div4");
let color = ["gold", "rgb(141, 153, 163)"];
doc.style.backgroundColor = color[i4];
i4 = (i4 + 1) % color.length;
}
setInterval(change, 1000);
</script>
</head>
<body>
<div id="div" class="div center"></div>
<div id="div2" class="div2 center2"></div>
<div id="div3" class="div3 center3"></div>
<div id="div4" class="div4 center4 "></div>
</body>
</html>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Peter Csala |