Question

我使用css创建了一个动画svg行。

我希望动画持续时间为200秒，但我希望该行在完成后再次自动重启。

这是我的代码示例。

＆＃13;

line {
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 500%;
    stroke-dasharray: 0 \0/;
    stroke-dashoffset: 0 \0/;
    -webkit-animation: draw 200s infinite;
    animation: draw 200s infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes draw {
  0% {
	stroke-dashoffset: 500%;
  },
  100% {
	stroke-dashoffset: 0%;
  }
}

@keyframes draw {
  0% {
	stroke-dashoffset: 500%;
  },
  100% {
	stroke-dashoffset: 0%;
  }
}

＆＃13;

<body>

<svg height="100" width="250">
  <line x1="25" y1="30" x2="45" y2="30" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>

</body>

＆＃13;

为了重新启动动画，我更改了animation标记：

-webkit-animation: draw 200s 2s infinite;
animation: draw 200s 2s infinite;

然而，我得到的效果是：

首先：两秒后线路结束。
以期望的持续时间（200秒）重新开始。但是，完成后，它不会立即重新开始。

完成后如何自动重启动画。我需要使用javascript或jquery吗？

Answer 1

问题是动画的持续时间设置为200秒，因此根据您的CSS，它会在200秒后再次循环，并再延迟2秒。根据我的理解，你想要慢慢绘制线条，因此你使用200s动画，这不是实现这一目标的最佳方式 - 至少不是因为你希望动画在短暂延迟后重新启动。

您可以使用ease-in并根据以下更改动画来缩短线条。这应该达到你想要的预期效果。

line {
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 500%;
    stroke-dasharray: 0 \0/;
    stroke-dashoffset: 0 \0/;
    -webkit-animation: draw 2s ease-in infinite;
    animation: draw 2s ease-in infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes draw {
  0% {
	stroke-dashoffset: 500%;
  },
  99% {
	stroke-dashoffset: 500%;
  },
  100% {
	stroke-dashoffset: 0%;
  }
}

@keyframes draw {
  0% {
	stroke-dashoffset: 500%;
  },
  99% {
	stroke-dashoffset: 500%;
  },
  100% {
	stroke-dashoffset: 0%;
  }
}

<body>

<svg height="100" width="250">
  <line x1="25" y1="30" x2="45" y2="30" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>

</body>

完成后如何自动重启动画的svg行？

1 个答案: