为什么运行动画后，原本居中的位置却发生了偏移？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
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;}
}
</style>
</head>
<body>
<div class="box1">
<span></span>
<span></span>
</div>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
