Изменить скорость слайд-шоу CSS

Question

В настоящее время у меня есть слайд-шоу на моем веб-сайте, но оно скользит слишком быстро, я хотел бы сделать его медленнее, но я не знаю, как я могу это сделать, каждый раз, когда я пытаюсь изменить некоторые вещи, я в конечном итоге все разрушаю.

Я хотел получить примерно 5/6 секунд на каждый слайд.Буду очень признателен, если кто-нибудь сможет мне помочь.

.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

Вы можете изменить часть длительности свойств -webkit-animation и animation ("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

Вы можете изменить секунды

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

для каждого дочернего элемента.

, но также убедитесь, что время основного слайдера пропорционально интервалу между секундами в дочерних элементах слайдера.Посмотрите на мой пример ниже и сравните его с вашим, чтобы понять, что я имею в виду.

время основного слайдера в вашем примере:

-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>