Having an unordered list, I would like to iterate through each list item one by one. My current solution is somewhat functional, but upon close inspection, you can observe that when it reaches "item 4," it starts overlapping with "item 1" and becomes inconsistent.
@keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
76% {
opacity: 1;
}
100% {
opacity: 1;
}
}
li {
list-style: none;
padding: 0;
font-size: 40px;
position: absolute;
width: 100%;
opacity: 0;
}
li:nth-of-type(1) {
animation: fadein 6s ease-in-out -4s infinite alternate;
}
li:nth-of-type(2) {
animation: fadein 6s ease-in-out 0s infinite alternate;
}
li:nth-of-type(3) {
animation: fadein 6s ease-in-out 4s infinite alternate;
}
li:nth-of-type(4) {
animation: fadein 6s ease-in-out 8s infinite alternate;
}<ul class="usp__list">
<li class="usp__item">
Item 1
</li>
<li class="usp__item">
Item 2
</li>
<li class="usp__item">
Item 3
</li>
<li class="usp__item">
Item 4
</li>
</ul>If anyone could assist in resolving this issue, it would be greatly appreciated. I assume it has something to do with the delay, but despite trying many variations, I am still facing this underlying problem.
Fiddle - https://jsfiddle.net/15c4rd8v/