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 Animation锁定如下：

@-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

无法向元素添加动画延迟

1 个答案: