如何停止svg動畫？

我有一個SVG動畫，我想知道如何在動畫序列完成一次後停止並離開SVG。這樣的標誌停留在頁面上，直到下一個頁面刷新等如何停止svg動畫？

這裏的演示： https://jsfiddle.net/u410bjyk/

HTML：

<svg class="pin" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60" version="1.1"> 
    <g class="pin__group"> 
    <g class="pin__grayGroup"> 
     <path class="pin__square" fill="none" stroke-width="1" d="M0,0 0,60 60,60 60,0z"/> 
     <path class="pin__line pin__line-1" fill="none" stroke-width="1" d="M15,0 15,60"/> 
     <path class="pin__line pin__line-2" fill="none" stroke-width="1" d="M30,0 30,60"/> 
     <path class="pin__line pin__line-3" fill="none" stroke-width="1" d="M45,0 45,60"/> 
     <path class="pin__line pin__line-1" fill="none" stroke-width="1" d="M0,45 60,45"/> 
     <path class="pin__line pin__line-2" fill="none" stroke-width="1" d="M0,30 60,30"/> 
     <path class="pin__line pin__line-3" fill="none" stroke-width="1" d="M0,15 60,15"/> 
     <path class="pin__circleBig" fill="none" stroke-width="1" d="M60,30 a30,30 0 0,1 -60,0 a30,30 0 0,1 60,0"/> 
     <path class="pin__circleSmall" fill="none" stroke-width="1" d="M45,30 a15,15 0 0,1 -30,0 a15,15 0 0,1 30,0"/> 
    </g> 
    <g class="pin__greenGroup"> 
     <path class="pin__outer" stroke-width="2" d="M30,0 a30,30 0 0,1 30,30 L60,60 30,60 a30,30 0 0,1 0,-60"/> 
     <path class="pin__inner" stroke-width="2" d="M45,30 a15,15 0 0,1 -30,0 a15,15 0 0,1 30,0"/> 
    </g> 
    </g> 
</svg>

CSS：

*, *:before, *:after { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
} 

.pin { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -60px; 
    margin-top: -60px; 
    width: 120px; 
    height: 120px; 
    overflow: visible; 
} 
.pin__group { 
    -webkit-transform-origin: 30px 30px; 
      transform-origin: 30px 30px; 
    -webkit-animation: group-anim 8s 1s infinite; 
      animation: group-anim 8s 1s infinite; 
} 
.pin__grayGroup { 
    -webkit-animation: gray-anim 8s 1s infinite; 
      animation: gray-anim 8s 1s infinite; 
} 
.pin__square { 
    stroke: #B8B8B8; 
    stroke-dasharray: 240, 240; 
    stroke-dashoffset: 240; 
    -webkit-animation: square-anim 8s 1s infinite; 
      animation: square-anim 8s 1s infinite; 
} 
.pin__line { 
    stroke: #B8B8B8; 
    stroke-dasharray: 60, 60; 
    stroke-dashoffset: 60; 
} 
.pin__line-1 { 
    -webkit-animation: line-anim 8s 0.6s infinite; 
      animation: line-anim 8s 0.6s infinite; 
} 
.pin__line-2 { 
    -webkit-animation: line-anim 8s 0.8s infinite; 
      animation: line-anim 8s 0.8s infinite; 
} 
.pin__line-3 { 
    -webkit-animation: line-anim 8s 1s infinite; 
      animation: line-anim 8s 1s infinite; 
} 
.pin__circleBig { 
    stroke: #B8B8B8; 
    stroke-dasharray: 188.522, 188.522; 
    stroke-dashoffset: 188.522; 
    -webkit-animation: bigCircle-anim 8s 1s infinite; 
      animation: bigCircle-anim 8s 1s infinite; 
} 
.pin__circleSmall { 
    stroke: #B8B8B8; 
    stroke-dasharray: 94.261, 94.261; 
    stroke-dashoffset: 94.261; 
    -webkit-animation: smallCircle-anim 8s 1s infinite; 
      animation: smallCircle-anim 8s 1s infinite; 
} 
.pin__outer { 
    stroke: #00CD73; 
    fill: transparent; 
    stroke-dasharray: 201.391, 201.391; 
    stroke-dashoffset: 201.391; 
    -webkit-animation: outer-anim 8s 1s infinite; 
      animation: outer-anim 8s 1s infinite; 
} 
.pin__inner { 
    stroke: #00CD73; 
    fill: transparent; 
    stroke-dasharray: 94.261, 94.261; 
    stroke-dashoffset: 94.261; 
    -webkit-animation: inner-anim 8s 1s infinite; 
      animation: inner-anim 8s 1s infinite; 
} 

@-webkit-keyframes square-anim { 
    15% { 
    stroke-dashoffset: 0; 
    } 
    100% { 
    stroke-dashoffset: 0; 
    } 
} 

@keyframes square-anim { 
    15% { 
    stroke-dashoffset: 0; 
    } 
    100% { 
    stroke-dashoffset: 0; 
    } 
} 
@-webkit-keyframes line-anim { 
    23% { 
    stroke-dashoffset: 60; 
    } 
    30% { 
    stroke-dashoffset: 0; 
    } 
    100% { 
    stroke-dashoffset: 0; 
    } 
} 
@keyframes line-anim { 
    23% { 
    stroke-dashoffset: 60; 
    } 
    30% { 
    stroke-dashoffset: 0; 
    } 
    100% { 
    stroke-dashoffset: 0; 
    } 
} 
@-webkit-keyframes bigCircle-anim { 
    30% { 
    stroke-dashoffset: 188.522; 
    } 
    43% { 
    stroke-dashoffset: 0; 
    } 
    100% { 
    stroke-dashoffset: 0; 
    } 
} 
@keyframes bigCircle-anim { 
    30% { 
    stroke-dashoffset: 188.522; 
    } 
    43% { 
    stroke-dashoffset: 0; 
    } 
    100% { 
    stroke-dashoffset: 0; 
    } 
} 
@-webkit-keyframes smallCircle-anim { 
    43% { 
    stroke-dashoffset: 94.261; 
    } 
    53% { 
    stroke-dashoffset: 0; 
    } 
    100% { 
    stroke-dashoffset: 0; 
    } 
} 
@keyframes smallCircle-anim { 
    43% { 
    stroke-dashoffset: 94.261; 
    } 
    53% { 
    stroke-dashoffset: 0; 
    } 
    100% { 
    stroke-dashoffset: 0; 
    } 
} 
@-webkit-keyframes group-anim { 
    53% { 
    -webkit-transform: rotate(0); 
      transform: rotate(0); 
    } 
    61% { 
    -webkit-transform: rotate(45deg); 
      transform: rotate(45deg); 
    } 
    94% { 
    -webkit-transform: rotate(45deg); 
      transform: rotate(45deg); 
    opacity: 1; 
    } 
    100% { 
    -webkit-transform: rotate(45deg); 
      transform: rotate(45deg); 
    opacity: 0; 
    } 
} 
@keyframes group-anim { 
    53% { 
    -webkit-transform: rotate(0); 
      transform: rotate(0); 
    } 
    61% { 
    -webkit-transform: rotate(45deg); 
      transform: rotate(45deg); 
    } 
    94% { 
    -webkit-transform: rotate(45deg); 
      transform: rotate(45deg); 
    opacity: 1; 
    } 
    100% { 
    -webkit-transform: rotate(45deg); 
      transform: rotate(45deg); 
    opacity: 0; 
    } 
} 
@-webkit-keyframes outer-anim { 
    61% { 
    stroke-dashoffset: 201.391; 
    } 
    71% { 
    stroke-dashoffset: 0; 
    } 
    79% { 
    stroke-dashoffset: 0; 
    fill: transparent; 
    } 
    94% { 
    stroke-dashoffset: 0; 
    fill: #00CD73; 
    } 
    100% { 
    stroke-dashoffset: 0; 
    fill: #00CD73; 
    } 
} 
@keyframes outer-anim { 
    61% { 
    stroke-dashoffset: 201.391; 
    } 
    71% { 
    stroke-dashoffset: 0; 
    } 
    79% { 
    stroke-dashoffset: 0; 
    fill: transparent; 
    } 
    94% { 
    stroke-dashoffset: 0; 
    fill: #00CD73; 
    } 
    100% { 
    stroke-dashoffset: 0; 
    fill: #00CD73; 
    } 
} 
@-webkit-keyframes inner-anim { 
    71% { 
    stroke-dashoffset: 94.261; 
    } 
    79% { 
    stroke-dashoffset: 0; 
    fill: transparent; 
    } 
    94% { 
    stroke-dashoffset: 0; 
    fill: white; 
    } 
    100% { 
    stroke-dashoffset: 0; 
    fill: white; 
    } 
} 
@keyframes inner-anim { 
    71% { 
    stroke-dashoffset: 94.261; 
    } 
    79% { 
    stroke-dashoffset: 0; 
    fill: transparent; 
    } 
    94% { 
    stroke-dashoffset: 0; 
    fill: white; 
    } 
    100% { 
    stroke-dashoffset: 0; 
    fill: white; 
    } 
} 
@-webkit-keyframes gray-anim { 
    53% { 
    opacity: 1; 
    } 
    79% { 
    opacity: 0.2; 
    } 
    94% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 0; 
    } 
} 
@keyframes gray-anim { 
    53% { 
    opacity: 1; 
    } 
    79% { 
    opacity: 0.2; 
    } 
    94% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 0; 
    } 
}

我知道我可以刪除「無限」屬性來運行一次，但問題是，如何在停止之後立即停止它？

來源

2017-10-10 user2513846

您可以通過使用暫停CSS動畫：

animation-play-state: paused;

我添加了一個按鈕，你的榜樣，讓你在任何時候停止動畫。

function stop() { 
 
    $(".pin__group, .pin__grayGroup, .pin__square, .pin__line-1, .pin__line-2, .pin__line-3, .pin__circleBig, .pin__circleSmall, .pin__outer, .pin__inner").addClass("stop"); 
 
}

*, *:before, *:after { 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.pin { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin-left: -60px; 
 
    margin-top: -60px; 
 
    width: 120px; 
 
    height: 120px; 
 
    overflow: visible; 
 
} 
 
.pin__group { 
 
    -webkit-transform-origin: 30px 30px; 
 
      transform-origin: 30px 30px; 
 
    -webkit-animation: group-anim 8s 1s forwards; 
 
      animation: group-anim 8s 1s forwards; 
 
} 
 
.pin__grayGroup { 
 
    -webkit-animation: gray-anim 8s 1s infinite; 
 
      animation: gray-anim 8s 1s infinite; 
 
} 
 
.pin__square { 
 
    stroke: #B8B8B8; 
 
    stroke-dasharray: 240, 240; 
 
    stroke-dashoffset: 240; 
 
    -webkit-animation: square-anim 8s 1s infinite; 
 
      animation: square-anim 8s 1s infinite; 
 
} 
 
.pin__line { 
 
    stroke: #B8B8B8; 
 
    stroke-dasharray: 60, 60; 
 
    stroke-dashoffset: 60; 
 
} 
 
.pin__line-1 { 
 
    -webkit-animation: line-anim 8s 0.6s infinite; 
 
      animation: line-anim 8s 0.6s infinite; 
 
} 
 
.pin__line-2 { 
 
    -webkit-animation: line-anim 8s 0.8s infinite; 
 
      animation: line-anim 8s 0.8s infinite; 
 
} 
 
.pin__line-3 { 
 
    -webkit-animation: line-anim 8s 1s infinite; 
 
      animation: line-anim 8s 1s infinite; 
 
} 
 
.pin__circleBig { 
 
    stroke: #B8B8B8; 
 
    stroke-dasharray: 188.522, 188.522; 
 
    stroke-dashoffset: 188.522; 
 
    -webkit-animation: bigCircle-anim 8s 1s infinite; 
 
      animation: bigCircle-anim 8s 1s infinite; 
 
} 
 
.pin__circleSmall { 
 
    stroke: #B8B8B8; 
 
    stroke-dasharray: 94.261, 94.261; 
 
    stroke-dashoffset: 94.261; 
 
    -webkit-animation: smallCircle-anim 8s 1s infinite; 
 
      animation: smallCircle-anim 8s 1s infinite; 
 
} 
 
.pin__outer { 
 
    stroke: #00CD73; 
 
    fill: transparent; 
 
    stroke-dasharray: 201.391, 201.391; 
 
    stroke-dashoffset: 201.391; 
 
    -webkit-animation: outer-anim 8s 1s infinite; 
 
      animation: outer-anim 8s 1s infinite; 
 
} 
 
.pin__inner { 
 
    stroke: #00CD73; 
 
    fill: transparent; 
 
    stroke-dasharray: 94.261, 94.261; 
 
    stroke-dashoffset: 94.261; 
 
    -webkit-animation: inner-anim 8s 1s infinite; 
 
      animation: inner-anim 8s 1s infinite; 
 
} 
 

 
@-webkit-keyframes square-anim { 
 
    15% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
    100% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 

 
@keyframes square-anim { 
 
    15% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
    100% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 
@-webkit-keyframes line-anim { 
 
    23% { 
 
    stroke-dashoffset: 60; 
 
    } 
 
    30% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
    100% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 
@keyframes line-anim { 
 
    23% { 
 
    stroke-dashoffset: 60; 
 
    } 
 
    30% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
    100% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 
@-webkit-keyframes bigCircle-anim { 
 
    30% { 
 
    stroke-dashoffset: 188.522; 
 
    } 
 
    43% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
    100% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 
@keyframes bigCircle-anim { 
 
    30% { 
 
    stroke-dashoffset: 188.522; 
 
    } 
 
    43% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
    100% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 
@-webkit-keyframes smallCircle-anim { 
 
    43% { 
 
    stroke-dashoffset: 94.261; 
 
    } 
 
    53% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
    100% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 
@keyframes smallCircle-anim { 
 
    43% { 
 
    stroke-dashoffset: 94.261; 
 
    } 
 
    53% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
    100% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 
@-webkit-keyframes group-anim { 
 
    53% { 
 
    -webkit-transform: rotate(0); 
 
      transform: rotate(0); 
 
    } 
 
    61% { 
 
    -webkit-transform: rotate(45deg); 
 
      transform: rotate(45deg); 
 
    } 
 
    94% { 
 
    -webkit-transform: rotate(45deg); 
 
      transform: rotate(45deg); 
 
    opacity: 1; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(45deg); 
 
      transform: rotate(45deg); 
 
    } 
 
} 
 
@keyframes group-anim { 
 
    53% { 
 
    -webkit-transform: rotate(0); 
 
      transform: rotate(0); 
 
    } 
 
    61% { 
 
    -webkit-transform: rotate(45deg); 
 
      transform: rotate(45deg); 
 
    } 
 
    94% { 
 
    -webkit-transform: rotate(45deg); 
 
      transform: rotate(45deg); 
 
    opacity: 1; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
 
    } 
 
    100% { 
 
    -webkit-transform: rotate(45deg); 
 
      transform: rotate(45deg); 
 
    } 
 
} 
 
@-webkit-keyframes outer-anim { 
 
    61% { 
 
    stroke-dashoffset: 201.391; 
 
    } 
 
    71% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
    79% { 
 
    stroke-dashoffset: 0; 
 
    fill: transparent; 
 
    } 
 
    94% { 
 
    stroke-dashoffset: 0; 
 
    fill: #00CD73; 
 
    } 
 
    100% { 
 
    stroke-dashoffset: 0; 
 
    fill: #00CD73; 
 
    } 
 
} 
 
@keyframes outer-anim { 
 
    61% { 
 
    stroke-dashoffset: 201.391; 
 
    } 
 
    71% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
    79% { 
 
    stroke-dashoffset: 0; 
 
    fill: transparent; 
 
    } 
 
    94% { 
 
    stroke-dashoffset: 0; 
 
    fill: #00CD73; 
 
    } 
 
    100% { 
 
    stroke-dashoffset: 0; 
 
    fill: #00CD73; 
 
    } 
 
} 
 
@-webkit-keyframes inner-anim { 
 
    71% { 
 
    stroke-dashoffset: 94.261; 
 
    } 
 
    79% { 
 
    stroke-dashoffset: 0; 
 
    fill: transparent; 
 
    } 
 
    94% { 
 
    stroke-dashoffset: 0; 
 
    fill: white; 
 
    } 
 
    100% { 
 
    stroke-dashoffset: 0; 
 
    fill: white; 
 
    } 
 
} 
 
@keyframes inner-anim { 
 
    71% { 
 
    stroke-dashoffset: 94.261; 
 
    } 
 
    79% { 
 
    stroke-dashoffset: 0; 
 
    fill: transparent; 
 
    } 
 
    94% { 
 
    stroke-dashoffset: 0; 
 
    fill: white; 
 
    } 
 
    100% { 
 
    stroke-dashoffset: 0; 
 
    fill: white; 
 
    } 
 
} 
 
@-webkit-keyframes gray-anim { 
 
    53% { 
 
    opacity: 1; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
 
    } 
 
    79% { 
 
    opacity: 0.2; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; 
 
    } 
 
    94% { 
 
    opacity: 0; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
 
    } 
 
} 
 
@keyframes gray-anim { 
 
    53% { 
 
    opacity: 1; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
 
    } 
 
    79% { 
 
    opacity: 0.2; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; 
 
    } 
 
    94% { 
 
    opacity: 0; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
 
    } 
 
} 
 

 
.stop { 
 
    -webkit-animation-play-state: paused; 
 
    -moz-animation-play-state: paused; 
 
    animation-play-state: paused; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<svg class="pin" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 60" version="1.1"> 
 
    <g class="pin__group"> 
 
    <g class="pin__grayGroup"> 
 
     <path class="pin__square" fill="none" stroke-width="1" d="M0,0 0,60 60,60 60,0z"/> 
 
     <path class="pin__line pin__line-1" fill="none" stroke-width="1" d="M15,0 15,60"/> 
 
     <path class="pin__line pin__line-2" fill="none" stroke-width="1" d="M30,0 30,60"/> 
 
     <path class="pin__line pin__line-3" fill="none" stroke-width="1" d="M45,0 45,60"/> 
 
     <path class="pin__line pin__line-1" fill="none" stroke-width="1" d="M0,45 60,45"/> 
 
     <path class="pin__line pin__line-2" fill="none" stroke-width="1" d="M0,30 60,30"/> 
 
     <path class="pin__line pin__line-3" fill="none" stroke-width="1" d="M0,15 60,15"/> 
 
     <path class="pin__circleBig" fill="none" stroke-width="1" d="M60,30 a30,30 0 0,1 -60,0 a30,30 0 0,1 60,0"/> 
 
     <path class="pin__circleSmall" fill="none" stroke-width="1" d="M45,30 a15,15 0 0,1 -30,0 a15,15 0 0,1 30,0"/> 
 
    </g> 
 
    <g class="pin__greenGroup"> 
 
     <path class="pin__outer" stroke-width="2" d="M30,0 a30,30 0 0,1 30,30 L60,60 30,60 a30,30 0 0,1 0,-60"/> 
 
     <path class="pin__inner" stroke-width="2" d="M45,30 a15,15 0 0,1 -30,0 a15,15 0 0,1 30,0"/> 
 
    </g> 
 
    </g> 
 
</svg> 
 

 
<button onclick="stop()">Stop</button>

來源

2017-10-10 18:43:43

抱歉，如果林密！但是如何在顯示綠色指針時將其應用到動畫的結尾？沒有用戶交互... – user2513846

你可以使用'setTimeout（）'。 –

謝謝！我結束了使用setTimeout（）。感謝您指點我正確的方向。 – user2513846

如何停止svg動畫？

回答

相關問題