如何在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>