Why does a margin animation on one div apply to every other div aswell?-CodePudding

so basically i have a keyframe class set to "slide" but when i run the sliding animation on one div, every other div in the html page moves with it (in my case there is a total of 3 divs) i want only 1 div (the square) to move up and rotate, but the slide animation makes everything go up but the rotation only applies to the div i set it to. source code here:

.Square1{
    width:10px;
    height:10px;
    background-color: white;


    animation: spin 10s linear infinite, slide 10s linear infinite;

    margin: 100px;
    padding: 0;
}


/*Spin Animation*/

@keyframes spin{
    100%{transform: rotate(360deg);}
}

@keyframes slide {
    from { margin-top: 0px;}
    to { margin-top: -200px;}   
   }

CSS Body Main: body{
    margin:0;
    padding:0;
    background-color: black;
}

.GameButton1:hover{
font-size:130px;
}

.GameButton1:hover img{
    width:150px;
    height:150px;
    
}
.GameButton1{
    text-decoration: none;
    color:white;
    position:relative;
    text-align:right;
    width:50px;
    height:50px;
    font-size:50px;
    transition:1s;
    
}

.GameButton1 img{
    position:relative;
    text-align:right;
    width:50px;
    height:50px;
    transition:1s;
}



.Info{
    text-decoration: none;
    color:white;
    position:relative;
    text-align:center;
    width:50px;
    height:50px;
    font-size:50px;
    transition:1s;
}

.Info img{
    position:relative;
    text-align:center;
    width:50px;
    height:50px;
    transition:1s;
}

.Info:hover{
    font-size:150px;
    }
    
.Info:hover img{
        width:150px;
        height:150px;
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Main Menu</title>
</head>
<body>
    <link rel="stylesheet" href="MenuConfig.css">
    <link rel="stylesheet" href="SquareRotation.css">

    <div ></div>
    <div ></div>

    <div ></div>

    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>

    <a  href="Options/Info/Info.html"><img src="Options/PhotosLibraryMenu/Info.png" width="50px" height="50px">Info</a>
    <a  href="Options/Games/Game.html"><img  src="Options/PhotosLibraryMenu/PlayButtonUsing.png" width="50px" height="50px">Games</a>

    <audio src="Audio/ButtonHover.mp3" ></audio>



</body>
</html>

CodePudding user response：

The margin applied to the first square is not being applied to the other squares.

However, the squares are positioned one after the other and so as you make the margin of the first one less, the others all move up.

There seems no reason to have two separate sets of keyframes in this instance so this snippet combines the two. It does not alter the margin of the first square but translates it in the Y direction. Transforms do not alter the positioning within the DOM so the other squares are not affected.

.Square1 {
  width: 10px;
  height: 10px;
  background-color: white;
  animation: spinslide 10s linear infinite;
  margin: 100px;
  padding: 0;
}


/*Spin and Rotate Animation*/

@keyframes spinslide {
  0% {
    transform: translateY(0) rotate(0);
  }
  100% {
    transform: translateY(-200px) rotate(360deg);
  }
}

body {
  margin: 0;
  padding: 0;
  background-color: black;
}

.GameButton1:hover {
  font-size: 130px;
}

.GameButton1:hover img {
  width: 150px;
  height: 150px;
}

.GameButton1 {
  text-decoration: none;
  color: white;
  position: relative;
  text-align: right;
  width: 50px;
  height: 50px;
  font-size: 50px;
  transition: 1s;
}

.GameButton1 img {
  position: relative;
  text-align: right;
  width: 50px;
  height: 50px;
  transition: 1s;
}

.Info {
  text-decoration: none;
  color: white;
  position: relative;
  text-align: center;
  width: 50px;
  height: 50px;
  font-size: 50px;
  transition: 1s;
}

.Info img {
  position: relative;
  text-align: center;
  width: 50px;
  height: 50px;
  transition: 1s;
}

.Info:hover {
  font-size: 150px;
}

.Info:hover img {
  width: 150px;
  height: 150px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Main Menu</title>
</head>

<body>
  <link rel="stylesheet" href="MenuConfig.css">
  <link rel="stylesheet" href="SquareRotation.css">

  <div ></div>
  <div ></div>

  <div ></div>

  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>

  <a  href="Options/Info/Info.html"><img src="Options/PhotosLibraryMenu/Info.png" width="50px" height="50px">Info</a>
  <a  href="Options/Games/Game.html"><img  src="Options/PhotosLibraryMenu/PlayButtonUsing.png" width="50px" height="50px">Games</a>

  <audio src="Audio/ButtonHover.mp3" ></audio>



</body>

</html>

While this stops the other elements moving, the effect of the animation seems a bit jerky. You perhaps need to look at introducing forwards to the animation and reversing it or something? I can't tell from the info given exactly what effect you want.