为什么一个 div 上的边距动画也适用于所有其他 div？

Question

所以基本上我有一个关键帧 class 设置为“幻灯片”，但是当我运行一个 div 上的滑动动画时，div div html 页面随之移动（在我的例子中总共有 3 divs）我只想要 1 div（正方形）向上移动和旋转，但是幻灯片动画使一切向上，但旋转仅适用于我设置的 div。源代码在这里：

.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 class="GameButton1"></div>
    <div class="GameButtonSideImage"></div>

    <div class="Info"></div>

    <div class="Square1"></div>
    <div class="Square2"></div>
    <div class="Square3"></div>
    <div class="Square4"></div>
    <div class="Square5"></div>
    <div class="Square6"></div>
    <div class="Square7"></div>

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

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



</body>
</html>

Answer 1

应用于第一个方格的边距未应用于其他方格。

但是，这些方块是一个接一个地放置的，因此当您缩小第一个方块的边距时，其他方块都会向上移动。

在这个例子中似乎没有理由有两组独立的关键帧，所以这个片段将两者结合起来。它不会改变第一个正方形的边距，而是在 Y 方向上平移它。变换不会改变 DOM 中的位置，因此其他方块不受影响。

.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 class="GameButton1"></div>
  <div class="GameButtonSideImage"></div>

  <div class="Info"></div>

  <div class="Square1"></div>
  <div class="Square2"></div>
  <div class="Square3"></div>
  <div class="Square4"></div>
  <div class="Square5"></div>
  <div class="Square6"></div>
  <div class="Square7"></div>

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

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



</body>

</html>

虽然这会阻止其他元素移动，但动画效果似乎有点不稳定。您可能需要考虑将前向动画引入并反转它或其他什么？我无法从给出的信息中准确判断出您想要什么效果。

为什么一个 div 上的边距动画也适用于所有其他 div？

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

html

css