Is there a way to make my CSS slides appear one after the other? I have created an animation but no matter how much I adjust the animation-delay parameter, it doesn't seem to work. I need the second slide to show up 30 seconds after the first one.
.slideInLeft2 {
-webkit-animation-name: slideInLeft2;
animation-name: slideInLeft2;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 30s; /* adjusted delay for second slide */
}
@-webkit-keyframes slideInLeft2 {
0% {
-webkit-transform: translateX(-100%);
visibility: visible;
}
100% {
-webkit-transform: translateX(0);
}
}
@keyframes slideInLeft2 {
0% {
transform: translateX(-400%);
visibility: visible;
}
100% {
transform: translateX(0);
}
}