css3 анимация png с прозрачностью

Question

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

Html

<div class="small xfade"> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span> 
</div> 

CSS

@keyframes xfade { 
    0% { opacity:1; } 
    17% { opacity:1; } 
    25% { opacity:0; } 
    92% { opacity:0; } 
    100% { opacity:1; } 
} 
.xfade span { 
    animation-name: xfade; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
    animation-duration: 8s; 

    height: 100%; 
    left: 0; 
    /* opacity: 0; */ 
    position: absolute; 
    top: 0; 
    width: 100%; 
} 

All visible at once during first loop

Only one visible during first loop, but flash

Answer 1

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

Затем вы устанавливаете продолжительность анимации, равную 8 секундам, и если у вас есть 4 элемента, вы устанавливаете задержку 0 для первой, задержка 2 секунды для второго и 4 и 6 для остальных.

Проблема в том, что второй элемент начинает анимацию через 2 секунды. Тем временем он имеет начальные свойства, которые могут соответствовать или нет, (обычно нет) свойства анимации.

Лучший способ решить это, чтобы понять, что если продолжительность анимации равна 8 с, то установка задержки на 2s аналогична установке ее на -6s. , потому что, если вы считаете 8s, начиная с -6s, вы закончите с 2s. Но тогда анимация запускается с первого момента со свойствами, которые должны иметь.

Таким образом, задержки в вашем случае должны быть 0s, -6s, -4s, -2s. Просто вычитайте длительность перехода от задержки перехода.

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

Если вы хотите, чтобы сделать все быстрее, но все остальное время то же самое, то вы должны уменьшить как продолжительность анимации и вся анимация задержки

Пример настройки

.xfade span { 
    animation-duration: 4s; 
} 

.xfade span:nth-of-type(1) { 
    animation-delay: -1s; 
} 

.xfade span:nth-of-type(2) { 
    animation-delay: -2s; 
} 
.xfade span:nth-of-type(3) { 
    animation-delay: -3s; 
} 

fiddle

Также давайте проанализируем, как вычисляется время анимации. Прежде всего, вы устанавливаете анимацию для элемента, который разделяет полный рабочий день с другими 3 элементами. Это означает, что каждый элемент имеет 1/4 времени, то есть 25%.

Это время должно быть разделено между временем полный дисплей и время твин. В исходном примере время разворота составляет 8%. Если вы хотите, чтобы это уменьшилось, предположим, что время между анимацией будет 6%. Тогда полное время отображения будет 25 - 6 = 19.

Это дает нам первую часть ключевых кадров:

@keyframes xfade { 
    0% { opacity:1; } 
    19% { opacity:1; } 
    25% { opacity:0; } 

Теперь, для окончательных ключевых кадров, мы должны помнить, что время твин 6, и установить, что в конце. Ключевой кадр мну быть 100 - 6 = 94. Remainig ключевыми кадрами:

94% { opacity:0; } 
    100% { opacity:1; } 
}