如何制止svg动画？

时间：2017-10-10 17:31:09

标签： css3 svg css-animations

我有一个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;
  }
}

我知道我可以删除＆＃34;无限＆＃34;运行一次的属性，但问题是，如何在此之后立即停止它？

1 个答案:

答案 0 :(得分：1)

您可以使用以下方法暂停CSS动画：

animation-play-state: paused;

我已经为您的示例添加了一个按钮，可让您随时停止动画。

＆＃13;
＆＃13; 
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");
}
＆＃13; 
*, *: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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题