jquery - 无法为元素添加动画延迟

Question

我想从一个 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;
}

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

Answer 1

你需要用到这个

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

代替-webkit-animation:-25s;

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