SVG background + css - Как это можно оживить?

Question

Итак, я видел этот безумный приятный эффект на Carrd.co, и я не понимаю, как это можно оживить.

.pizza { 
 
    display: -moz-flex; 
 
    display: -webkit-flex; 
 
    display: -ms-flex; 
 
    display: flex; 
 
    -moz-flex-direction: column; 
 
    -webkit-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    -moz-align-items: center; 
 
    -webkit-align-items: center; 
 
    -ms-align-items: center; 
 
    align-items: center; 
 
    -moz-justify-content: space-between; 
 
    -webkit-justify-content: space-between; 
 
    -ms-justify-content: space-between; 
 
    justify-content: space-between; 
 
    min-height: 100vh; 
 
    padding: 2em 0; 
 
    text-align: center; 
 
    background-image: url("https://carrd.co/assets/images/bg.svg"),linear-gradient(45deg, #6E436C 25%, #2A4584 75%); 
 
    background-size: cover, cover; 
 
    background-position: top, center; 
 
    background-repeat: no-repeat, no-repeat; 
 
    cursor: default; 
 
}

<div class="pizza"> 
 
    
 
</div>

Если кто-то может объяснить мне, что было бы неплохо. Что заставляет svg анимировать?

Answer 1

Цитирование анимации ключевого кадра css в SVG, предназначенный для каждого полигона, чтобы исчезать и выходить. Нравится так:

@keyframes foo { 
    0% { opacity: 1; } 
    20% { opacity: 0.25; } 
    40% { opacity: 1.0; } 
    60% { opacity: 0.55; } 
    80% { opacity: 0.25; } 
    100% { opacity: 1; } 
} 

polygon.a1 { animation: foo ease 10s infinite; } 
polygon.f1 { fill: rgba(255,255,255,0.0125); } 
polygon.d1 { animation-delay: 0.5s; }