无法向元素添加动画延迟答案

【问题标题】：Can't add animation delay to element无法向元素添加动画延迟
【发布时间】：2014-08-12 19:02:22
【问题描述】：

我想从 css3 动画的随机关键帧开始。使用负动画延迟可以更改起点。所以我的想法是做这样的事情：

var random = Math.floor(Math.random() * -100) - 1;
console.log(random);
$("#colorDiv").css({
 '-webkit-animation-delay': random + 's'
});

问题只是添加到元素中：

style="-webkit-animation: -25s;

所以 -delay 丢失了。 CSS 动画锁是这样的：

@-webkit-keyframes coloursBG {
  0% {background-color: #39f;}
 15% {background-color: #8bc5d1;}
 30% {background-color: #f8cb4a;}
 45% {background-color: #95b850;}
 60% {background-color: #944893;}
 75% {background-color: #c71f00;}
 90% {background-color: #bdb280;}
100% {background-color: #39f;}
}
#colorDiv{
-webkit-animation-direction: normal;
-webkit-animation-duration: 50s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: coloursBG;
-webkit-animation-timing-function: ease;
}

有没有人想办法解决这个问题？

【问题讨论】：

标签： jquery css animation delay

【解决方案1】：

你需要使用这个

 -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
    animation-delay: 25s;

而不是-webkit-animation: -25s;

您可以在此处更改属性：Example

【讨论】：

我知道，但无法为我从 Javascript 设置它。