Delay between percentages in keyframes css

December 15, 2024

i need to change various images in one div, but i want that, between image and image, 1s delay. I need to set a delay between percentages in keyframes

here my code

.imgWrapper{
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: 500ms;
    animation: imgChanger 3s linear infinite;
    width: 500px;
    height: 300px;
}
@keyframes imgChanger {
    0%{
        background-image: url(Images/superblog/superblog1.png);
    }
    50%{
        background-image: url(Images/superblog/superblog2.png);
    }
    100%{
        background-image: url(Images/superblog/superblog3.png);
    }
}

how can i achieve that? thanks!!!!

>Solution :

You can add percentages in one frame so it stays the same image. And increase the time of the animation to match the 2s display

.imgWrapper {
...
  animation: imgChanger 6s linear infinite;
...
}

@keyframes imgChanger {
  0%, 16.66% { 
    background-image: url('Images/superblog/superblog1.png');
  }
  33.33%, 49.99% {
    background-image: url('Images/superblog/superblog2.png');
  }
  66.66%, 83.33% {
    background-image: url('Images/superblog/superblog3.png');
  }
  100% {
    background-image: url('Images/superblog/superblog1.png');
  }
}
```