动画完成后停止并在几秒钟后重新启动答案

【问题标题】：Animation stopping after completion and restarting after few seconds动画完成后停止并在几秒钟后重新启动
【发布时间】：2021-12-29 11:50:06
【问题描述】：

我想为头像披风制作动画。动画按预期工作，但一旦动画完成，它会等待 2-3 秒再重新启动。动画没有应有的流畅。我有正在制作动画的附加代码笔。

谢谢

Codepen link :- https://codepen.io/Anonymous3399/pen/mdBqMrr

【问题讨论】：

我可能是错的，但这可能是因为您在第一帧之间几乎没有变化，但是线性函数的延迟很大。检查this example in Codepen - 它对我来说很好
@OlegBarabanovI 检查了您的示例，但在该示例中，一旦动画完成并开始新的动画，也会出现延迟。如果将动画时间从 1 秒增加到 3 秒，您会看到更大的延迟。
我在基于 chromium 的浏览器中尝试了这个示例，它对我来说没有明显的延迟（我在 Android 和 Windows 10 笔记本电脑上检查过）。在 Firefox 中，动画根本不起作用。由于动画在不同系统上不太稳定，您可能需要考虑使用 apng、webp、gif 或其他格式进行后备。

标签： html css animation css-animations

【解决方案1】：

100% 和 0% 的关键帧应该与完成一个循环的关键帧相同。 @keyframes 斗篷 { 0% { d：路径（'M469.22,274.48c75.54,171.74-79.46,351.74-62.3,630.22,166.84-161.48,225.84-.48,375.25-50,204.59-118.48,386.59-240.48,387.24-456.48-291.65-8-280.65-183-529.49 -125.14Z') } 30% { D：路径（'M469.22,274.48C369,490.22,170,658.22,216.92,914.7C105.1-48.48,269.1,94.52,48,25,0C635,807.22,860,978.22,949.41,914.7,967,419.27.7,967,749.22,788,284.22,639.92,273.08z'）} 42% { D：道路（'M469.22,274.48C369,490.22,116.38,684.22,276.92,914.7C105.1-48.48,241.78,57.52,355.25,0,131.53-73.48,291.53-73.48,291.21,52.52,377.24-71-147-110.48-278.71-514.48 -369.49-570.62Z')} 55% { D：路径（'M469.22,274.48C369,490.22,176.38,684.22,336.92,914.7C105.1-48.48,211.78,57.52,325.78,291.53-73.48,291.89,47.52,377.24-141C865.06,693.22,767.06,693.22,767.06,329.22,639.92 ,273.08Z'); } 70％{D：路径（'M469.22,274.48C369,490.22,366.73,604.7C105.1-48.48.7C105.1-48.48,23.81,110.52,325.25,0,117.56-162.48,261.89-88,48,261.89-88,48,261.89-88,0.34.24-276.48-174.35- 289-399.49-345.14Z') } 78%{ d:path('M469.22,274.48c-178.81,97.74-63.81,329.74-62.3,630.22,100.49-5.48,253.49,72.52,375.25-50,120.24-181.48,306.24-210.48,8-30.3-120.48,8-30.3-- 266-479.49-265.14Z') } 89%{ D：路径（'M469.222,274.48C-28.13,117.74-62.3,630.22,100.49-5.48,203.17-90.48,203.5-50,227.92,19.52,273.92-200.52,273.92-200.48,273.92-200.48,311.32,65-335.32- 123-529.49-185.14Z') } 100%{ d：路径（'M469.22,274.48c75.54,171.74-79.46,351.74-62.3,630.22,166.84-161.48,225.84-.48,375.25-50,204.59-118.48,386.59-240.48,387.24-456.48-291.65-8-280.65-183-529.49 -125.14Z') } }

这会起作用。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。
@nishant。你能告诉我为什么我们需要保持关键帧相同吗？我尝试了您的代码，延迟被删除，但出现了另一个问题。就像第一次动画效果比第二次完美，我猜它真的动画非常快丢失了一些帧。比第 3 次它完美运行，第 4 次它移动得非常快。使用您的代码链接到 codepen：-codepen.io/Anonymous3399/pen/ExwQypb。观察斗篷，一次真的很光滑，另一次会很快。
如果你想创建一个动画循环，动画应该从它开始的地方结束，因此它会创建一个循环。