1

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>

1 respuesta 1

1

Probablemente omitiste el @keyframes;

Ahora bien no se si este es el efecto deseado, comentalo y te puedo ayudar mas aun.

quedaría de la siguiente manera(observa al final se muestra el nuevo contenido):

#circulo
{
    position: relative;
    width: 15%;
    padding-bottom: 15%;
    background-color: rgba(255,255,255,1.00);
    border-radius: 50%;
  animation:circulo_giratorio 1s ease infinite;
}
#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; 
}
 @keyframes circulo_giratorio {
 0% {
transform: rotate(360deg);
}
 100% {
transform: rotate(0deg);
}
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.