Изменение background для SVG c однотоного на изображение

#html #css3 #svg #css_animation #svg_animation

Как изменить фон для SVG? Изначально фон синего цвета спустя несколько секунд меняется
на изображение. 

  







    

Ответы

Ответ 1



 



Ответ 2

Можно под одной фигурой нарисовать другую, верхнюю показать с задержкой, сделать
паузу можно за счет последовательности css анимаций, первая пустая, нужна чтобы сработал
delay от второй:



image {
    opacity: 0;
    animation: wait, 1s ease-out 2s op forwards;
}

@keyframes wait {
    from { opacity: 0 }
    to { opacity: 0 }
}

@keyframes op {
  from { opacity: 0 }
  to { opacity: 1 }
}