Html css中动画制作后如何确定圆弧在圆形边框上的位置

我正在创建一个css设计，其中我需要在圆形边框上设置圆弧动画。我在网上找到了一个代码，它允许我旋转边框，但在旋转后，它会回到其初始位置。我希望在动画完成后将其保持在完全相同的弯曲位置。这是密码

.circle{
宽度：100px；
高度：100px；
位置：相对位置；
}
.圆圈.边框{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
背景：透明；
边界半径：50%；
边框宽度：10px；
边框样式：实心；
边框顶部颜色：橙色；
左边框颜色：透明；
边框底色：透明；
右边框颜色：透明；
-webkit动画名称：旋转；
-webkit动画持续时间：2秒；
-webkit动画迭代计数：1；
-webkit动画计时功能：线性；
}
.玩{
填充：20px 30px；
字体大小：56px；
}
.停下来{
字体大小：12px；
填充：30px；
文本对齐：居中；
}
@-webkit关键帧旋转{
从{
-webkit变换：旋转（0度）；
}
到{
-webkit变换：旋转（45度）；
}
}

PS：图标加载有点慢。等到它出现。

请阻止我

您可以使用：

animation-fill-mode: forwards;

财产

.circle{
宽度：100px；
高度：100px；
位置：相对位置；
}
.圆圈.边框{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
背景：透明；
边界半径：50%；
边框宽度：10px；
边框样式：实心；
边框顶部颜色：橙色；边框左侧颜色：透明；边框底部颜色：透明；边框右侧颜色：透明；
-webkit动画名称：旋转；
-webkit动画持续时间：2秒；
-webkit动画迭代计数：1；
-webkit动画计时功能：线性；
动画填充模式：正向；
}
.玩{
填充：20px 30px；
字体大小：56px；
}
.停下来{
字体大小：12px；
填充：30px；
文本对齐：居中；
}
@-webkit关键帧旋转{
从{
-webkit变换：旋转（0度）；
}
到{
-webkit变换：旋转（45度）；
}
}

PS：图标加载有点慢。等到它出现。

请阻止我