Почему анимация полей для одного div применяется и ко всем остальным div? ⇐ Html

[Anonymous]

Итак, по сути, у меня есть класс ключевого кадра, установленный на «слайд», но когда я запускаю анимацию скольжения на одном элементе div, каждый второй элемент управления на html-странице перемещается вместе с ним (в моем случае всего 3 элемента управления) я хочу, чтобы только 1 элемент управления (квадрат) перемещался вверх и вращался, но анимация слайда заставляет все двигаться вверх, но вращение применяется только к элементу управления, который я установил.
исходный код здесь:

Код: Выделить всё

.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;
}

Код: Выделить всё

Main Menu







[url=Options/Info/Info.html]
[img]Options/PhotosLibraryMenu/Info.png[/img]
Info[/url]
[url=Options/Games/Game.html]
[img]Options/PhotosLibraryMenu/PlayButtonUsing.png[/img]
Games[/url]

Подробнее здесь: https://stackoverflow.com/questions/724 ... div-aswell