I am attempting to make three elements appear sequentially on the page, but I'm encountering an issue. When I implement my code, all three elements show up at once, with the first element seemingly skipping its animation entirely. Then, the second element disappears before restarting its animation, followed by the third element doing the same.
Below is the code I have written. Can you help me identify what might be missing or causing this unexpected behavior?
@-webkit-keyframes reset {
0% {opacity: 0;}
100% {opacity: 0;}
}
@-webkit-keyframes fade-in {
0% { opacity: 0; -webkit-transform: scale(.1);}
85% {opacity: 1; -webkit-transform: scale(1.05);}
100% {-webkit-transform: scale(1);}
}
.fade-in {
-webkit-animation-name: reset, fade-in;
-webkit-animation-duration: .5s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-iteration-count: 1;
}
.fade-in.one {-webkit-animation-delay: 0, .5;}
.fade-in.two {-webkit-animation-delay: 0, 1.5s;}
.fade-in.three {-webkit-animation-delay: 0, 2.5s;}
Any assistance is greatly appreciated. Thank you!