1. Accueil
  2. Question et réponse
  3. comment arrêter une animation svg?

comment arrêter une animation svg?

2017-10-10 17 views
0

J'ai une animation SVG et j'essaie de comprendre comment arrêter et laisser le SVG en vue juste après que la séquence d'animation soit terminée une fois. De cette façon, le logo reste sur la page jusqu'à ce que la page suivante rafraîchir etc.comment arrêter une animation svg?

est ici la démo: 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; 
    } 
}

Je sais que je peux supprimer la propriété "infini" pour l'exécuter une fois, mais la question est: comment l'arrête-t-on juste après?

Source

2017-10-10 user2513846

Répondre

0

Vous pouvez mettre en pause une animation CSS en utilisant:

animation-play-state: paused;

J'ai ajouté un bouton à votre exemple que vous permet d'arrêter l'animation à tout moment.

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>

Source

2017-10-10 18:43:43

+0

désolé si Im dense! mais comment pourrais-je l'appliquer à la fin de l'animation lorsque la broche verte est affichée? sans interaction de l'utilisateur ... – user2513846

+0

Vous pouvez utiliser 'setTimeout()'. –

+0

merci! J'ai fini par utiliser setTimeout(). Merci de m'avoir indiqué la bonne direction. – user2513846

 Questions connexes

  • Aucun problème connexe^_^