Per semplificare il tutto vi giro il codice inserito in oggetto html:

CODICE HTML

<ul>
<li><a href="https://www.farg2.it/blog/index.php">BLOG <br>
farg2</a></li>
<li><a href="https://www.farg2.it/contattaci.html">CONTATTI</a></li>
<li><a href="https://www.farg2.it/start.html">START</a></li>
<li><a href="https://www.farg2.it/chi-siamo.html">CHI SIAMO</a></li>
<li><a href="https://www.farg2.it/project.html">PROJECT</a></li>
<li><a href="https://www.farg2.it/seguici.html">FOLLOW</a></li>
<li><a href="https://www.farg2.it/galleria-farg2.html">GALLERY</a></li>
<li><a href="https://www.farg2.it/index.html">HOME <br> farg2</a></li>
</ul>

ESPERTO:

* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

a {
color: #f00;
}

p a {
color: #00f;
}

ul {
border-radius:50%;
//overflow:hidden;
position: relative;
top: 0px;
left: 0px;
width: 400px;
height: 400px;
}

ul li {
position: absolute;
overflow: hidden;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
width: 200px;
height: 200px;
transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
-webkit-transform: translate(50px,100px);
}

li:nth-child(1){
-webkit-transform: rotate(0deg) skew(50deg);
-webkit-animation: open-sombra-7 1s 1;
}

li:nth-child(1) a{background-image:-webkit-radial-gradient(50% 50%,circle closest-side, rgba(0,0,0,0) 58%, #5f1003 58%, #5f1003 99%, rgba(0,0,0,0) 99%); }
li:nth-child(2){
-webkit-transform: rotate(45deg) skew(50deg);
-webkit-animation: open-sombra-8 1s 1;
}
li:nth-child(2) a{background-image:-webkit-radial-gradient(50% 50%,circle closest-side, rgba(0,0,0,0) 58%, #C4007A 58%, #C4007A 99%, rgba(0,0,0,0) 99%); }
li:nth-child(3){
-webkit-transform: rotate(90deg) skew(50deg);
-webkit-animation: open-sol-1 1s 1;
}
li:nth-child(3) a{background-image:-webkit-radial-gradient(50% 50%,circle closest-side, rgba(0,0,0,0) 58%, #BF8B00 58%, #BF8B00 99%, rgba(0,0,0,0) 99%); }
li:nth-child(4){
-webkit-transform: rotate(135deg) skew(50deg);
-webkit-animation: open-sol-2 1s 1;
}
li:nth-child(4) a{background-image:-webkit-radial-gradient(50% 50%,circle closest-side, rgba(0,0,0,0) 58%, #BF8B00 58%, #BF8B00 99%, rgba(0,0,0,0) 99%); }
li:nth-child(5){
-webkit-transform: rotate(180deg) skew(50deg);
-webkit-animation: open-sol-3 1s 1;
}
li:nth-child(5) a{background-image:-webkit-radial-gradient(50% 50%,circle closest-side, rgba(0,0,0,0) 58%, #BF8B00 58%, #BF8B00 99%, rgba(0,0,0,0) 99%);); }
li:nth-child(6){
-webkit-transform: rotate(225deg) skew(50deg);
-webkit-animation: open-sol-4 1s 1;
}
li:nth-child(6) a{background-image:-webkit-radial-gradient(50% 50%,circle closest-side, rgba(0,0,0,0) 58%, #BF8B00 58%, #BF8B00 99%, rgba(0,0,0,0) 99%); }
li:nth-child(7){
-webkit-transform: rotate(270deg) skew(50deg);
-webkit-animation: open-sombra-5 1s 1;
}
li:nth-child(7) a{ background-image:-webkit-radial-gradient(50% 50%,circle closest-side, rgba(0,0,0,0) 58%, #C4007A 58%, #C4007A 99%, rgba(0,0,0,0) 99%)
}

li:nth-child(8){
-webkit-transform: rotate(315deg) skew(50deg);
-webkit-animation: open-sombra-6 1s 1;
}
li:nth-child(8) a{background-image:-webkit-radial-gradient(50% 50%,circle closest-side, rgba(0,0,0,0) 58%, #5f1003 58%, #5f1003 99%, rgba(0,0,0,0) 99%); }

li a{
-webkit-transform: skew(-50deg) rotate(-70deg) scale(1);
background: radial-gradient(transparent 40%, #449e6a 25%);
color:#fff;
font-family: 'crete_roundregular';
line-height: 14px;
text-transform: capitalize;
text-decoration: none;
text-align: center;
padding-top: 1.8em;
position: absolute;
width: 400px;
height: 400px;
margin-left: -100px;
left: 50%;
top: 0;
}

@-webkit-keyframes open-sombra-7 {
0% { -webkit-transform: rotate(70deg) skew(50deg) scale(0.1); }
20% { -webkit-transform: rotate(70deg) skew(50deg) scale(1); }
40% { -webkit-transform: rotate(70deg) skew(50deg) scale(1); }
100% { -webkit-transform: rotate(0deg) skew(50deg); }
}

@-webkit-keyframes open-sombra-8 {
0% {-webkit-transform: rotate(70deg) skew(50deg) scale(0.1); }
20% { -webkit-transform: rotate(70deg) skew(50deg) scale(1); }
40% { -webkit-transform: rotate(70deg) skew(50deg) scale(1); }
100% { -webkit-transform: rotate(45deg) skew(50deg);}
}

@-webkit-keyframes open-sol-1 {
0% {-webkit-transform: rotate(70deg) skew(50deg) scale(0.1); }
20% { -webkit-transform: rotate(70deg) skew(50deg) scale(1); }
40% { -webkit-transform: rotate(70deg) skew(50deg) scale(1); }
100% { -webkit-transform: rotate(90deg) skew(50deg);}
}

@-webkit-keyframes open-sol-2 {
0% {-webkit-transform: rotate(70deg) skew(50deg) scale(0.1); }
20% { -webkit-transform: rotate(70deg) skew(50deg) scale(1); }
40% { -webkit-transform: rotate(70deg) skew(50deg) scale(1); }
100% { -webkit-transform: rotate(135deg) skew(50deg);}
}
@-webkit-keyframes open-sol-3 {
0% {-webkit-transform: rotate(70deg) skew(50deg) scale(0.1); }
20% { -webkit-transform: rotate(70deg) skew(50deg) scale(1); }
40% { -webkit-transform: rotate(70deg) skew(50deg) scale(1); }
100% { -webkit-transform: rotate(180deg) skew(50deg); }
}
@-webkit-keyframes open-sol-4 {
0% {-webkit-transform: rotate(70deg) skew(50deg) scale(0.1); }
20% { -webkit-transform: rotate(70deg) skew(50deg) scale(1); }
40% { -webkit-transform: rotate(70deg) skew(50deg) scale(1); }
100% { -webkit-transform: rotate(225deg) skew(50deg); }
}
@-webkit-keyframes open-sombra-5 {
0% {-webkit-transform: rotate(70deg) skew(50deg) scale(0.1); }
20% { -webkit-transform: rotate(70deg) skew(50deg) scale(1); }
40% { -webkit-transform: rotate(70deg) skew(50deg) scale(1); }
100% { -webkit-transform: rotate(-90deg) skew(50deg); }
}
@-webkit-keyframes open-sombra-6 {
0% {-webkit-transform: rotate(70deg) skew(50deg) scale(0.1); }
20% { -webkit-transform: rotate(70deg) skew(50deg) scale(1); }
40% { -webkit-transform: rotate(70deg) skew(50deg) scale(1); }
100% { -webkit-transform: rotate(-45deg) skew(50deg); }
}

I path fanno riferimento al puntamento del sito principale che ora per il test ho cambiato per farvi capire direttamente che succede,specialmente sul blog.

Nessuno che può darmi una mano?

Ok ho risolto da solo.