html, body {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: white; 
    
}





@keyframes changeImage {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

img#changingImage {
    width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}

@keyframes changeImageSrc {
    0%, 7.142% { content: url('images/1.webp'); } 
    7.142%, 14.285% { content: url('images/2.webp'); }
    14.285%, 21.427% { content: url('images/1.webp'); } 
    21.427%, 28.569% { content: url('images/2.webp'); }
    28.569%, 35.711% { content: url('images/1.webp'); } 
    35.711%, 42.853% { content: url('images/2.webp'); }
    42.853%, 49.995% { content: url('images/1.webp'); } 
    49.995%, 57.137% { content: url('images/2.webp'); }
    57.137%, 64.279% { content: url('images/3.webp'); } 
    64.279%, 71.421% { content: url('images/4.webp'); }
    71.421%, 78.563% { content: url('images/3.webp'); } 
    78.563%, 85.705% { content: url('images/4.webp'); }
    85.705%, 92.847% { content: url('images/3.webp'); } 
    92.847%, 100% { content: url('images/5.webp'); } 
}






img#changingImage {
    animation: changeImageSrc 3s forwards;
}