Warum gilt eine Randanimation für ein Div auch für jedes andere Div? ⇐ CSS

[Anonymous]

Im Grunde habe ich also eine Keyframe-Klasse, die auf „slide“ eingestellt ist, aber wenn ich die Schiebeanimation auf einem Div ausführe, bewegt sich jedes andere Div in der HTML-Seite mit (in meinem Fall sind es insgesamt 3 Divs). Ich möchte, dass sich nur 1 Div (das Quadrat) nach oben bewegt und dreht, aber die Folienanimation sorgt dafür, dass alles nach oben geht, aber die Drehung gilt nur für das Div, auf das ich es eingestellt habe.
Quellcode hier:

Code: Select all

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

Code: Select all

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]