CSS3 Photo Gallery Эффект перехода - PullRequest
Новая
       10

CSS3 Photo Gallery Эффект перехода

2 голосов
/ 04 ноября 2011

Я пытаюсь создать изящный переход между изображениями в моей фотогалерее без использования ": hover" или одного Javascript. (Я все еще открыт для HTML5)

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

Я использую задержку между изображениями в попытке пошатнуть анимацию, но изображения слишком сильно перекрывают друг друга. Кажется, я неправильно понял ряд вещей. Мой Css ниже: 

#imgContainer {
height: 205px;
position: relative;
width: 300px;
}

#imgContainer img {
-moz-animation-duration: 12s;
-moz-animation-iteration-count: infinite;
-moz-animation-name: FadeInOut;
-moz-animation-timing-function: ease-in-out;
left: 0;
position: absolute;
}
#imgContainer img:nth-of-type(1) {
    -moz-animation-delay: 0s;
}
#imgContainer img:nth-of-type(2) {
    -moz-animation-delay: 6s;
}
#imgContainer img:nth-of-type(3) {
    -moz-animation-delay: 12s;
}

@-moz-keyframes FadeInOut {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

Я действительно новичок в css3, поэтому любая помощь будет принята с благодарностью.

1 Ответ

4 голосов
/ 05 ноября 2011

Успех!

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

Я хотел, чтобы слайд-шоу продолжалось с интервалом в 15 секунд. Поэтому для этого я установил продолжительность всей анимации на 45 с. Ключевые кадры постепенно корректируют непрозрачность изображений на основе текущего времени или кадра в анимации. На это указывает «%». Например, от 2% до 32% от 45 с, ключевой кадр для первого изображения будет непрозрачным на 100%. Между 32% и 34% первое изображение начнет переход от непрозрачного к полностью прозрачному.

Разница между (34% из 45 с) - (32% из 45 с) равна времени, необходимому для завершения перехода. Увеличьте эту разницу для более длительного перехода.

Ключевой кадр для второго изображения делает то же самое, только его переход не начинается, пока он не достигнет 33% анимации 45-х годов. (Я решил слегка перекрыть их для визуальной привлекательности). Опять же, я использую разницу между 33% и 35%, чтобы сократить время перехода, а не 0% и 35%, что привело бы к гораздо более длительному переходу.

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

При реализации этого не забудьте изменить / добавить соответствующий префикс поставщика для вашего браузера и браузера вашей веб-аудитории. 

/*Chrome/Safari: -webkit- \ FireFox +4: -moz- \ Opera: -o- \ IE9?: -ms- */

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

Спасибо.

=) 

#imgContainer img{
    position:absolute;
    left:0;
}

#image0 {
    -moz-animation: 45s linear 0s normal none infinite myKeyFrameName0;
}
#image1 {
    -moz-animation: 45s linear 0s normal none infinite myKeyFrameName1;
}
#image2 {
    -moz-animation: 45s linear 0s normal none infinite myKeyFrameName2;
}

@-moz-keyframes myKeyFrameName0 {
0%   {opacity: 0;}
2%   {opacity: 1;}
32%  {opacity: 1;}
34%  {opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes myKeyFrameNamee1 {
0%   {opacity: 0;}
33%  {opacity: 0;}
35%  {opacity: 1;}
65%  {opacity: 1;}
67%  {opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes myKeyFrameName2 {
0%   {opacity: 0;}
66%  {opacity: 0;}
68%  {opacity: 1;}
98%  {opacity: 1;}
100% {opacity: 0;}
}
...