Не удивительно, что у вас были проблемы с пониманием, как эта штука работает. Сроки были скрыты в списке слишком сложных значений. Сначала рассмотрим элемент <animate> для функции фильтра <feFuncA>. Чтобы перейти от одного изображения к следующему, нужно изменить атрибут slope с 0 на 2. Напишите его так:
<animate attributeName="slope" repeatCount="indefinite"
values="0;0;2" keyTimes="0;0.4;1" dur="5s" />
dur="5s" определяет полное время, которое занимает анимация. Список keyTimes называет три момента времени: 0 равняется 0 с, 0,4 равняется 2 с, а 1 равняется 5 с. (Первое значение должно быть 0, а последнее - 1.) Для этих моментов времени список values содержит значения для атрибута slope. Между 0 и 2 значение остается равным 0, что означает, что изображение, названное в элементе <feImage>, остается видимым. Между 2 и 5 секундами изображение непрерывно переходит к тому, который указан в элементе <image> ниже. После этого анимация снова возвращается к первому изображению и повторяется. (Вы должны быть в состоянии выяснить, как изменить эти значения для других таймингов.)
Теперь, чтобы получить больше отображаемых изображений, вы можете сделать это: в тот момент, когда анимация возвращается к первому изображению, вы меняете <feImage> на то, что только что было перемещено, и меняете то, которое будет показано следующим <image>. Эта анимация выглядит так:
<feImage xlink:href="" width="800" height="600" result="underlay">
<animate attributeName="xlink:href" repeatCount="indefinite"
values="url1;url2;url3;url4" dur="20s" />
</feImage>
Обратите внимание, что значение dur теперь составляет 20 с, что в четыре раза превышает длительность анимации перехода для четырех изображений, поэтому обмен изображениями происходит каждые 5 секунд.
Анимация для элемента <image> выглядит так же, но перечисляет изображения, начинающиеся со второго URL.