Pure Fullscreen CSS Slideshow с двойным эффектом затухания и увеличения для смещенных элементов на фоновых слайдах

Question

Pure Fullscreen CSS Slideshow с двойным эффектом затухания и увеличения для смещенных элементов на фоновых слайдах

0

Я пытаюсь, чтобы это слайд-шоу jsfiddle с обложками фоновых изображений, слайдами и смещенным текстом на нем, работая без анимации автоматического цикла, только кнопками. Все элементы слайд-шоу имеют отдельную функцию fade in/out, поэтому фон отображается перед текстом. Попробуйте нажать на кнопки, все работает нормально, но я не могу удалить autoloop. Вероятно, я должен изменить анимацию для перехода и удалить -webkit-animation: titleAnimation 24s linear infinite 0s; по всем элементам, я не знаю. Я пробовал, но безуспешно.

lizardhr 10 апр. 2014, в 14:41

Источник

Теги:

html

css

css3

css-transitions

slideshow

1 ответ

Ещё вопросы

lizardhr · Accepted Answer · 2014-04-16T22-23-00.000Z

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

Я обновил анимацию следующим образом:

   /* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}

/* Animation for the title */
@-webkit-keyframes titleAnimation { 
    from {
        opacity:0;
    }
    to {
        opacity:1;
     -webkit-animation-fill-mode:forwards; }
}

и добавил режим заполнения анимации к элементам, чтобы заставить их оставаться на последнем кадре анимации (все еще видимый с непрозрачностью: 1)

-webkit-animation-fill-mode:forwards;

Здесь DEMO