为何单个div的margin动画会同步作用到页面其他所有div元素？

• 位移动画使用margin-top实现，margin属于正常文档流布局属性，修改该值会触发整个页面的布局重排，元素的外边距变化会带动文档流中后续所有元素同步位移，因此页面其他div会跟着一起上移。
• 旋转动画使用transform: rotate()实现，transform属于视觉渲染属性，修改时不会改变文档流结构，仅作用于元素本身的视觉效果，因此旋转只会应用到目标Square1元素上。

将位移动画改为使用transform: translateY()实现，避免修改文档流属性。可以直接把旋转和位移动画合并，也可以分开写两个基于transform的动画，都不会影响其他元素布局。

修改后的CSS代码 #

.Square1{
    width:10px;
    height:10px;
    background-color: white;
    /* 绑定合并后的动画即可，分开写两个动画的写法见注释 */
    animation: spin-slide 10s linear infinite;
    margin: 100px;
    padding: 0;
}

/* 合并旋转+上移动画，transform的多个函数可以同时生效，不会互相覆盖 */
@keyframes spin-slide {
    from {
        transform: rotate(0deg) translateY(0);
    }
    to {
        transform: rotate(360deg) translateY(-200px);
    }
}

/* 分开写两个动画的写法：
@keyframes spin{
    100%{transform: rotate(360deg);}
}
@keyframes slide {
    from { transform: translateY(0);}
    to { transform: translateY(-200px);}   
}
animation属性配置为：animation: spin 10s linear infinite, slide 10s linear infinite;
*/

/* 其余原有CSS无需修改 */
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;
    }

原有HTML代码不需要任何调整，直接替换CSS部分即可实现预期效果。

• 实现动效时，位移、旋转、缩放、透明度变化优先使用transform和opacity属性，这类属性修改不会触发页面重排，动画流畅度更高，也不会意外影响其他元素布局。
• 如果必须使用margin、top/left等布局属性做动画，需要给目标元素设置position: absolute使其脱离正常文档流，避免位置变化影响其他元素，该方案性能弱于transform实现。

内容的提问来源于stack exchange，提问作者Mattka