Change slideshow speed CSS

Question

I currently have a slideshow on my website but it is sliding too fast, I would like to make it slower but I dont know how can I do that, everytime I try to change some things I end up ruining everything.

I wanted to get like 5/6 seconds each slide. I would be extremely grateful if someone could help me.

.topSlider {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
  overflow: hidden;
  position: absolute; }

  .topSlider span {
    position: absolute;
    color: white;
    z-index: 1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center; }

  .topSlider .slide {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    -webkit-animation: slide 12s infinite;
    animation: slide 10s infinite;
    overflow: hidden; }
  .topSlider .slide:nth-child(2) {
    left: 0%;
    -webkit-animation-delay: -1s;
    animation-delay: -0.5s;
    background-color: black;
    background-size: cover;
    background-position: center; }
  .topSlider .slide:nth-child(3) {
    left: 100%;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    background-color: red;
    background-size: cover;
    background-position: center; }
  .topSlider .slide:nth-child(4) {
    left: 100%;
    -webkit-animation-delay: 5s;
    animation-delay: 4.5s;
    background-color: white;
    background-size: cover;
    background-position: center; }
  .topSlider .slide:nth-child(5) {
    left: 100%;
    -webkit-animation-delay: 8s;
    animation-delay: 7s;
    background-color: blue;
    background-size: cover;
    background-position: center; }
  .topSlider p {
    text-align: center;
    display: inline-block;
    width: 100%;
    margin-top: 340px;
    color: white; }

@-webkit-keyframes slide {
  0% {
    left: 100%;
    width: 100%; }
  5% {
    left: 0%; }
  25% {
    left: 0%; }
  30% {
    left: -100%;
    width: 100%; }
  31% {
    left: -100%;
    width: 0%; }
  100% {
    left: 100%;
    width: 0%; } }

@keyframes slide {
  0% {
    left: 100%;
    width: 100%; }
  5% {
    left: 0%; }
  25% {
    left: 0%; }
  30% {
    left: -100%;
    width: 100%; }
  31% {
    left: -100%;
    width: 0%; }
  100% {
    left: 100%;
    width: 0%; } }

    <div class="topSlider">
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>
    </div>

Answer 1

You can change the duration part of the -webkit-animation and animation properties ("2s"):

 -webkit-animation: slide 2s infinite;
animation: slide 2s infinite;

.topSlider {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
  overflow: hidden;
  position: absolute; }

  .topSlider span {
    position: absolute;
    color: white;
    z-index: 1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center; }

  .topSlider .slide {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    -webkit-animation: slide 6s infinite;
    animation: slide 6s infinite;
    overflow: hidden; }
  .topSlider .slide:nth-child(2) {
    left: 0%;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    background-color: black;
    background-size: cover;
    background-position: center; }
  .topSlider .slide:nth-child(3) {
    left: 100%;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    background-color: red;
    background-size: cover;
    background-position: center; }
  .topSlider .slide:nth-child(4) {
    left: 100%;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    background-color: white;
    background-size: cover;
    background-position: center; }
  .topSlider .slide:nth-child(5) {
    left: 100%;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    background-color: blue;
    background-size: cover;
    background-position: center; }
  .topSlider p {
    text-align: center;
    display: inline-block;
    width: 100%;
    margin-top: 340px;
    color: white; }

@-webkit-keyframes slide {
  0% {
    left: 100%;
    width: 100%; }
  5% {
    left: 0%; }
  25% {
    left: 0%; }
  30% {
    left: -100%;
    width: 100%; }
  31% {
    left: -100%;
    width: 0%; }
  100% {
    left: 100%;
    width: 0%; } }

@keyframes slide {
  0% {
    left: 100%;
    width: 100%; }
  5% {
    left: 0%; }
  25% {
    left: 0%; }
  30% {
    left: -100%;
    width: 100%; }
  31% {
    left: -100%;
    width: 0%; }
  100% {
    left: 100%;
    width: 0%; } }

<div class="topSlider">
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>
    </div>

Answer 2

You can change the seconds

    -webkit-animation-delay: -1s;
    animation-delay: -0.5s;

for each child.

but also make sure that the main slider time is proportional to the interval between the seconds in the slider children. Have a look at my example below and compare it to yours to see what I mean.

main slider time in your example:

-webkit-animation: slide 12s infinite;
animation: slide 10s infinite;

.topSlider {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
  overflow: hidden;
  position: absolute; }

  .topSlider span {
    position: absolute;
    color: white;
    z-index: 1;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center; }

  .topSlider .slide {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    -webkit-animation: slide 20s infinite;
    animation: slide 20s infinite;
    overflow: hidden; }
  .topSlider .slide:nth-child(2) {
    left: 0%;
    -webkit-animation-delay: -1s;
    animation-delay: -0.5s;
    background-color: black;
    background-size: cover;
    background-position: center; }
  .topSlider .slide:nth-child(3) {
    left: 100%;
    -webkit-animation-delay: 5s;
    animation-delay: 4.5s;
    background-color: red;
    background-size: cover;
    background-position: center; }
  .topSlider .slide:nth-child(4) {
    left: 100%;
    -webkit-animation-delay: 10s;
    animation-delay: 9.0s;
    background-color: white;
    background-size: cover;
    background-position: center; }
  .topSlider .slide:nth-child(5) {
    left: 100%;
    -webkit-animation-delay: 15s;
    animation-delay: 13.5s;
    background-color: blue;
    background-size: cover;
    background-position: center; }
  .topSlider p {
    text-align: center;
    display: inline-block;
    width: 100%;
    margin-top: 340px;
    color: white; }

@-webkit-keyframes slide {
  0% {
    left: 100%;
    width: 100%; }
  5% {
    left: 0%; }
  25% {
    left: 0%; }
  30% {
    left: -100%;
    width: 100%; }
  31% {
    left: -100%;
    width: 0%; }
  100% {
    left: 100%;
    width: 0%; } }

@keyframes slide {
  0% {
    left: 100%;
    width: 100%; }
  5% {
    left: 0%; }
  25% {
    left: 0%; }
  30% {
    left: -100%;
    width: 100%; }
  31% {
    left: -100%;
    width: 0%; }
  100% {
    left: 100%;
    width: 0%; } }

    <div class="topSlider">
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>
        <div class="slide"></div>
    </div>