基本上我有一个关键帧类设置为slide"但是当我在一个div上运行滑动动画时，HTML页面中的其他div都会随之移动(在我的例子中，总共有3个div)，我只希望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>应用于第一个正方形的边距是而不是应用于其他方块
然而，正方形的位置是一个接一个的，所以当你把第一个正方形的边距减小时，其他正方形都向上移动。
似乎没有理由在这个实例中有两组单独的关键帧，所以这个代码片段将两者结合起来。它不改变第一个正方形的边缘，而是在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>虽然这阻止了其他元素的移动，但动画效果似乎有点不稳定。你可能需要考虑向前引入动画并反转它或其他什么?从所给的信息中，我不能确切地说出你想要什么样的效果。