我想从一个 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;
}
有没有人有解决这个问题的想法?
最佳答案
你需要用到这个
-webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
animation-delay: 25s;
代替-webkit-animation:-25s;
您可以在此处更改属性:Example
关于jquery - 无法为元素添加动画延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25262536/