Why does not the transition work in this example?

Question

Why does not the transition work in this example?

Navigation

#1 by (1 votes)

1

Why does not the rotation transition work? what am I doing wrong?

#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>

html5 css3

asked by Orlando Pasaca Rojas 22.02.2018 в 23:23

source

1 answer

What Tables to use for a Database that stores User Roles? invoke functions defined in other files in c ++ [duplicate]

score 1 · Answer 1

You probably omitted @keyframes ;

Now I do not know if this is the desired effect, comment and I can help even more.

would be as follows (see at the end the new content is shown):

#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);
}
}