проблема синхронизации анимации css

Question

проблема синхронизации анимации css

0

Весь мой код выглядит так:

.inner .css-img {
  max-width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  -webkit-animation: css-carousel-fade 10s linear infinite;
  -moz-animation: css-carousel-fade 10s linear infinite;
  -ms-animation: css-carousel-fade 10s linear infinite;
  animation: css-carousel-fade 10s linear infinite;
}

.inner .css-img:nth-child(2) {
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
  -ms-animation-delay: 5s;
  animation-delay: 5s;
}

@keyframes css-carousel-fade {
  0%, 50%, 100% { opacity: 0; }
  10%, 50% { opacity: 1;}
}

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

user2184718 13 дек. 2013, в 21:55

Источник

Теги:

html

css

1 ответ

Ещё вопросы

Mr. Mayers · Answer 1 · 2013-12-13T18-01-00.000Z

Прозрачность - это то, что анимируется. % Сообщает вам, какая часть общей анимации обрабатывает эту часть. Итак, с 0-45 у вас непрозрачность 1, затем она исчезает с 45-90, а затем она исчезает с 90-100, а затем снова возвращается к 1, когда анимация начинается.

хорошо, понял. Когда я изменяю свой код на то, что я редактировал выше, я получаю правильный переход между изображениями один и два, но не два обратно в одно.
Вы пытаетесь вернуться в 1? Если это так, то измените 0% при непрозрачности: 1 на 15% или 20%.
добавление 15% отлично подходит для перехода между первым и вторым. Переход от 2 к 1 все еще занимает слишком много времени. Похоже, что показ первого изображения занимает слишком много времени, а затем переходит со второго обратно на первое.