Мерцание элемента в SVG-картинке

#css #html5 #svg #css_animation #svg_animation

Внутри SVG-файла есть элемент, например ..., внутри него ещё много
всего.
 Как сделать, чтобы opacity у всего содержимого внутри blink постоянно циклично менялось,
например с 0.5 на 1, и опять на 0.5? 
    

Ответы

Ответ 1

SVG анимация

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

 









CSS анимация

Обратите внимание на то, что одна и та же css анимация animation: fade 800ms infinite;
применена к разным группам с разными условиями. Элементы первой группа мерцают постоянно.
Элементы второй группы мерцают при наведении.



#blink {
 animation: fade 800ms infinite;
}
 @keyframes fade {
     0% { fill-opacity: 0.5; }
    12% { fill-opacity: 1; }
    100% { fill-opacity: 0.5; }
   } 
   
   #circleBlink:hover { 
   animation: fade 0.5s infinite;
   
   }