我正在尝试使用一些不错的 html 创建幻灯片。我已经设法创建了大约 4 张幻灯片。但是第四张幻灯片超过了第三张幻灯片。我已经调整了延迟时间，所以它会稍后出现，但它不起作用。我正在使用速记属性，但我已经尝试过不使用速记，但它也没有用。 我的代码如下:
/*slide 4 */
#slideInLeft4 { /* do slide 4. Para criar de um terceiro, só copiar e colar, trocar os nomes para o número correspondente e alterar o delay*/
-webkit-animation: slideInLeft4 20s 59s 1 normal both; /* duração, atraso, repetição, direção, modo de preenchimento Safari 4+ */
-moz-animation: slideInLeft4 20s 59s 1 normal both; /* duração, atraso, repetição, direção, modo de preenchimento Fx 5+ */
-o-animation: slideInLeft4 20s 59s 1 normal both; /* duração, atraso, repetição, direção, modo de preenchimento Opera 12+ */
animation: slideInLeft4 20s 59s 1 normal both; /* duração, atraso, repetição, direção, modo de preenchimento IE 10+, Fx 29+ */
}
@keyframes slideInLeft4 { /* a porcentagem representa a animation-duration. Exemplo: animation-duration: 10s, então 20% é 2s */
0% {
transform: translateX(-100%);
transform: translateY(-100%);
opacity: 1;
}
10% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
80% {
opacity: 1;
}
90% {
opacity: 1;
}
95% { /* tempo que começa a desaparecer o slide */
opacity: 0.5;
}
100% {
opacity: 0;
}
}
我的 fiddle :https://jsfiddle.net/gabrielluz/kh2mp3b1/
最佳答案
正确顺序的简写参数:
- 动画名称 (slideInLeft4)
- 持续时间(20 秒)
- 计时功能(尝试线性或 look at those available )
- 延迟(59 秒)
- 迭代次数 (1)
- 方向(正常)
- 填充模式(两者)
- 播放状态(与 JS 一起播放/停止它很有用)。
在你的情况下，它应该是:
animation: slideInLeft4 20s linear 59s 1 normal both;
来源:w3Schools
关于javascript - 不能在 CSS 动画上使用延迟，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44003500/