Porque no funciona la transicion de rotar? que estoy haciendo mal?
#circulo
{
position: relative;
width: 15%;
padding-bottom: 15%;
background-color: rgba(255,255,255,1.00);
border-radius: 50%;
}
#subcirculo1
{
position: absolute;
height: 100%;
width: 100%;
background-image: linear-gradient(90deg, transparent 50%,
rgba(2,113,76,1.00) 0);
border-radius: 50%;
transform: rotate(0deg);
z-index: 1;
}
#subcirculo2
{
position: absolute;
height: 100%;
width: 100%;
background-image: linear-gradient(90deg, transparent 50%, white 0);
border-radius: 50%;
transform: rotate(30deg);
z-index: 2;
transition: all 5s ease;
}
<div id="circulo">
<div id="subcirculo1">
</div>
<div id="subcirculo2">
</div>
</div>