Javascript 更改css动画，使其在特定时间后自动运行

是否可以使用JavaScript使动画自动运行并在2秒钟后保持更改（即不重置）

我尝试使用以下方法：

  element.style.WebkitAnimationPlayState = "paused";

及

然而，它没有起作用。如有其他建议，我们将不胜感激

.spin{
宽度：5em；
身高：5公分；
填充：0；
}
.旋转：悬停{
颜色：#0eb7da；
}
.spin:：之前，.spin:：之后{
排名：0；
左：0；
}
.spin：：之前{
边框：2倍实心透明；
}
.spin:hover:：before{
边框顶部颜色：#0eb7da；
右边框颜色：#0eb7da；
边框底色：#0eb7da；
-webkit过渡：边框顶部颜色0.15s线性，边框右侧颜色0.15s线性0.1s，边框底部颜色0.15s线性0.2s；
过渡：边框顶部颜色0.15s线性，边框右侧颜色0.15s线性0.1s，边框底部颜色0.15s线性0.2s；
}
.spin：：之后{
边框：0实心透明；
}
.spin:hover:：after{
边框顶部：2个实心#0eb7da；
左边框宽度：2px；
右边框宽度：2px；
-webkit变换：旋转（270度）；
变换：旋转（270度）；
-webkit变换：边框左宽度0s线性0.35s，-webkit变换0.4s线性0s；
过渡：边框左宽度0s线性0.35s，-webkit变换0.4s线性0s；
过渡：变换0.4s线性0s，边框左宽度0s线性0.35s；
过渡：变换0.4s线性0s，边框左宽度0s线性0.35s，-webkit变换0.4s线性0s；
}
.圆圈{
边界半径：100%；
盒影：无；
}
.circle:：之前，.circle:：之后{
边界半径：100%；
}
钮扣{
背景：无；
边界：0；
框大小：边框框；
框阴影：插入0 2px#f45e61；
颜色：#f45e61；
字体大小：继承；
字号：700；
边缘：1米；
填料：1米2米；
文本对齐：居中；
文本转换：大写；
位置：相对位置；
垂直对齐：中间对齐；
}
按钮：：前，按钮：：后{
框大小：边框框；
内容：''；
位置：绝对位置；
宽度：100%；
身高：100%；
}

---

spin circle

您可以使用javascript添加类（例如，.active）并将.spin:hover css替换为.spin.active，而不是使用：hover状态

下面是一个jQuery示例：

$('button').on('click', function() {
   $(this).addClass('active');
});

---

下面是一个可能有助于实现您想要的功能的小提琴示例：

将您的

：hover

选择器替换为一个额外的

活动的

类，再加上一点javascript，您应该会做得很好：

document.addEventListener（'DOMContentLoaded'，function（）{
var按钮=document.querySelector（'.spin'）；
setTimeout（函数（）{
button.className+=“活动”；
}, 2000);
});
.spin{
宽度：5em；
身高：5公分；
填充：0；
}
.spin:：之前，.spin:：之后{
排名：0；
左：0；
}
.spin：：之前{
边框：2倍实心透明；
}
.spin：：之后{
边框：0实心透明；
}
.spin.active{
颜色：#0eb7da；
}
.spin.active:：before{
边框顶部颜色：#0eb7da；
右边框颜色：#0eb7da；
边框底色：#0eb7da；
-webkit过渡：边框顶部颜色0.15s线性，边框右侧颜色0.15s线性0.1s，边框底部颜色0.15s线性0.2s；
过渡：边框顶部颜色0.15s线性，边框右侧颜色0.15s线性0.1s，边框底部颜色0.15s线性0.2s；
}
.spin.active:：after{
边框顶部：2个实心#0eb7da；
左边框宽度：2px；
右边框宽度：2px；
-webkit变换：旋转（270度）；
变换：旋转（270度）；
-webkit变换：边框左宽度0s线性0.35s，-webkit变换0.4s线性0s；
过渡：边框左宽度0s线性0.35s，-webkit变换0.4s线性0s；
过渡：变换0.4s线性0s，边框左宽度0s线性0.35s；
过渡：变换0.4s线性0s，边框左宽度0s线性0.35s，-webkit变换0.4s线性0s；
}
.圆圈{
边界半径：100%；
盒影：无；
}
.circle:：之前，.circle:：之后{
边界半径：100%；
}
钮扣{
背景：无；
边界：0；
框大小：边框框；
框阴影：插入0 2px#f45e61；
颜色：#f45e61；
字体大小：继承；
字号：700；
边缘：1米；
填料：1米2米；
文本对齐：居中；
文本转换：大写；
位置：相对位置；
垂直对齐：中间对齐；
}
按钮：：前，按钮：：后{
框大小：边框框；
内容：''；
位置：绝对位置；
宽度：100%；
身高：100%；
}
spin circle
在CSS中，可以设置一个hudge延迟来冻结处于defaut状态的动画（而不是：悬停）


.spin{
宽度：5em；
身高：5公分；
填充：0；
}
.旋转：悬停{
颜色：#0eb7da；
}
.spin：：之前，
.spin：：之后{
排名：0；
左：0；
}
.spin：：之前{
边框：2倍实心透明；
转换延迟：9999s
}
.spin:hover:：before{
边框顶部颜色：#0eb7da；
右边框颜色：#0eb7da；
边框底色：#0eb7da；
-webkit过渡：边框顶部颜色0.15s线性，边框右侧颜色0.15s线性0.1s，边框底部颜色0.15s线性0.2s；
过渡：边框顶部颜色0.15s线性，边框右侧颜色0.15s线性0.1s，边框底部颜色0.15s线性0.2s；
}
.spin：：之后{
边框：0实心透明；
转换延迟：9999s
}
.spin:hover:：after{
边框顶部：2个实心#0eb7da；
左边框宽度：2px；
右边框宽度：2px；
-webkit变换：旋转（270度）；
变换：旋转（270度）；
-webkit变换：边框左宽度0s线性0.35s，-webkit变换0.4s线性0s；
过渡：边框左宽度0s线性0.35s，-webkit变换0.4s线性0s；
过渡：变换0.4s线性0s，边框左宽度0s线性0.35s；
过渡：变换0.4s线性0s，边框左宽度0s线性0.35s，-webkit变换0.4s线性0s；
}
.圆圈{
边界半径：100%；
盒子阴影：没有
$('button').on('click', function() {
   $(this).addClass('active');
});