如何在css动画后修复圆弧边界上的圆弧位置

Question

我正在创建一个css设计，我需要在圆形边框上创建圆弧动画我已经在线找到了一个代码，并且它允许我旋转一些代码边界，但是在旋转之后它回到它的初始位置，我想保持它在完成动画之后完全相同的位置。下面是代码

.circle { 
 
    width: 100px; 
 
    height: 100px; 
 
    position: relative; 
 
} 
 
.circle .border { 
 

 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: transparent; 
 
    border-radius: 50%; 
 
    border-width:10px; 
 
    border-style:solid; 
 
    border-top-color:orange; 
 
    border-left-color:transparent; 
 
    border-bottom-color:transparent; 
 
    border-right-color:transparent; 
 
    -webkit-animation-name: Rotate; 
 
    -webkit-animation-duration: 2s; 
 
    -webkit-animation-iteration-count:1; 
 
    -webkit-animation-timing-function: linear; 
 
} 
 
.play { 
 
    padding: 20px 30px; 
 
    font-size: 56px; 
 
} 
 
.stop { 
 
    font-size: 12px; 
 
    padding: 30px; 
 
    text-align: center; 
 
} 
 
@-webkit-keyframes Rotate { 
 
    from { 
 
    -webkit-transform: rotate(0deg); 
 
    } 
 
    to { 
 
    -webkit-transform: rotate(45deg); 
 
    } 
 
}

<div class="circle"> 
 
    <div class="border"></div> 
 
    <div class="play"><i class="fa fa-play"></i> 
 
    </div> 
 
</div> 
 

 
<p> 
 
    PS: The icon loading is a bit slow. Wait until it shows up. 
 
</p> 
 

 
<div class="circle"> 
 
    <div class="border"></div> 
 
    <div class="stop">Stop me please</div> 
 
</div>

Answer 1

您可以使用：

animation-fill-mode: forwards; 

财产

.circle { 
 
    width: 100px; 
 
    height: 100px; 
 
    position: relative; 
 
} 
 
.circle .border { 
 

 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: transparent; 
 
    border-radius: 50%; 
 
    border-width:10px; 
 
    border-style:solid; 
 
    border-top-color:orange;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent; 
 
    -webkit-animation-name: Rotate; 
 
    -webkit-animation-duration: 2s; 
 
    -webkit-animation-iteration-count:1; 
 
    -webkit-animation-timing-function: linear; 
 
animation-fill-mode: forwards; 
 
} 
 
.play { 
 
    padding: 20px 30px; 
 
    font-size: 56px; 
 
} 
 
.stop { 
 
    font-size: 12px; 
 
    padding: 30px; 
 
    text-align: center; 
 
} 
 
@-webkit-keyframes Rotate { 
 
    from { 
 
    -webkit-transform: rotate(0deg); 
 
    } 
 
    to { 
 
    -webkit-transform: rotate(45deg); 
 
    } 
 
}

<div class="circle"> 
 
    <div class="border"></div> 
 
    <div class="play"><i class="fa fa-play"></i> 
 
    </div> 
 
</div> 
 

 
<p> 
 
    PS: The icon loading is a bit slow. Wait until it shows up. 
 
</p> 
 

 
<div class="circle"> 
 
    <div class="border"></div> 
 
    <div class="stop">Stop me please</div> 
 
</div>