Slide

Front-end
#1

Tenho um slide de background. Estou com um problema na duração de aparição das imagens. Tipo, vai mudando as imagens e tal, quando termina de carregar a imagem, ela já começa a carregar a próxima. Como faço pra ficar um tempo parado na imagem carregada antes de seguir para a próxima? Obs: Se aumento o tempo de duração da animação, ele aumenta o tempo entre a transição entre as imagens.
Segue meu código abaixo:
.slide{
width: 100%;
height: 100vh;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
backface-visibility: hidden;
animation: slidebg 80s infinite 0s;
animation-timing-function: linear;
}

@keyframes slidebg {

0%{
background-image: url(img1);
}

25%{
background-image: url(img2);
}

50%{
background-image: url(img3);
}

75%{
background-image: url(img4);
}

100%{
background-image: url(img5);
}

#2

Com base nesse artigo eu criei esse exemplo:

  1. tempo de transição: 1s
  2. tempo de pausa: 6s

Como são 5 imagem o tempo de pausa é 5•6 = 30s
Como são 6 transições, 1↝2↝3↝4↝5↝1 o tempo é 6•1= 6s (obs: está em um loop).

O tempo total da Animação: 36s;

  • Tempo de pausa em (%): 6/36 • 100= 16.66%;
  • Tempo de transição em (%): 1/36 • 100 = 2.77%.

Tendo como base esses valores, vai somando:
tempo de pausa + tempo de transição.

<!DOCTYPE html>
<html>
	<head>
		<title>teste</title>
		<style>
			.exemplo{
				width:60%;
				height:200px;
				background-color:red;
				animation-name: slide;
				animation-duration: 36s;
				animation-iteration-count:infinite;
				animation-timing-function:linear;
			}
			@keyframes slide{
				0%,16.66%{
					background-color:red;
				}
				19.43%,36.09%{
					background-color:blue;
				}
				38.86%,55.52%{
					background-color:green;
				}
				58.29%,74.95%{
					background-color:yellow;
				}
				77.72%,100%{
					background-color:black;
				}
			}
		</style>
	</head>
	<body>
		<div class="exemplo"></div>
	</body>
</html>

Se você quiser mudar o tempo de transição, pausa ou a duração completa da Animação, terá que refazer os calculos, então essa talvez não seria a melhora abordagem. Se você conhece o framework Bootstrap, dá uma olhada nesse site:
https://getbootstrap.com.br/docs/4.1/components/carousel/