服务器复位后位置偏移,为什么运行动画后，原本居中的位置却发生了偏移？

为什么运行动画后，原本居中的位置却发生了偏移？

*{

padding: 0px;

margin: 0px;

}

.box1{

width: 600px;

height: 200px;

background: orange;

position: relative;

}

.box1 span{

position: absolute;

border: 8px solid #fff;

border-top: 8px solid transparent;

border-radius: 999px;

top: 50%;left: 50%;

transform: translate(-50%,-50%);

}

.box1 span:nth-child(1){

width: 80px;

height: 80px;

/*animation: span1 2s linear infinite ;*/

}

.box1 span:nth-child(2){

width: 40px;

height: 40px;

/*animation: span2 1s linear infinite ;*/

}

@-webkit-keyframes span1{

0%{transform: rotate(360deg); opacity: 1;}

50%{transform: rotate(180deg); opacity: .5;}

100%{transform: rotate(0deg); opacity: 0;}

}

@-webkit-keyframes span2{

0%{transform: rotate(0deg); opacity: .5;}

50%{transform: rotate(180deg); opacity: 1;}

100%{transform: rotate(360deg); opacity: .5;}

}