Javascript 如何在Web动画API完成之前暂停动画？

我正在用javascript编写一个库，它使用。默认情况下，动画完成后，所有内容都会重置为动画开始前的状态

在动画处于完成状态或在执行

onfinish

回调之前，“暂停”动画的可靠方法是什么

以下是一个例子：

var elem=document.querySelector（'.pulse'）；
var animation=elem.animate(
{
不透明度：[1,0.5]，
变换：[“比例（1）”，“比例（0.5）”]
},
{
持续时间：500
}
);
动画。播放（）；
//这很有效。。。但是比持续时间短10毫秒？
//这不太可靠。。。
setTimeout（函数（）{
暂停（）；
}, 490);

你好，世界！
为什么不将
CSS动画
与
动画填充模式：forwards
一起使用，这样可以使动画保持完成时的状态

#shrink {
    position: relative;
    animation: myAnimation 500 forwards;
}

@keyframes myAnimation {
    0%   { opacity:  1; transform:scale(1);  }
    100% { opacity: .5; transform:scale(.5); }
}

虽然@andu andrici的回答让我走上了正确的方向，但我要求在Web动画API中找到一个解决方案

解决方案是在
.animate（）
调用的第二个参数中向对象添加
fill:'forwards'
。像这样：


var elem=document.querySelector（'.pulse'）；
var animation=elem.animate(
{
不透明度：[1,0.5]，
变换：[“比例（1）”，“比例（0.5）”]
},
{
持续时间：500，
填充：“前锋”
}
);
动画。播放（）

你好，世界！