Why does a margin animation on one div apply to every other div aswell?
23:41 01 Jun 2022

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



    
    
    
    Main Menu


    
    

    

    


    


    

    

    

    

    

    

    


    Info
    Games

html css