Stop Animation from Spinning

programming
1

http://davidsimonperry.com/1400.html
This is my Problem.

Background to rotate to draw the eye and entice you to click on the green and red ball.

Click on the green and red ball to grow.

Click on the green and red ball to shrink.

I do not want the green and red ball to spin.

If I remove the animation from the class=“spinner” the green and red ball falls behind the class=“bg”

z-index has no effect.

If I take the animation away on the class=“spinner” it falls behind the class=“bg”

HTML if I move the class=“spinner” on top of the class=“bg” the the green and red ball falls behind the class=“bg”

Any thoughts would be appreciated.

<!-- Border --><!-- Border --><!-- Border -->

<div id=“border”>

<input type=“checkbox” id=“form-01” />

<label for=“form-01” class=“ball-01”>

<div class=“circle”>

<div class=“bg”>

</div>

<div class=“spinner”>

<img src=“images/pics/P&S.png” width=“100%” alt=""/>

</div>

</div>

</label>

</div>

/– Border –//– Border –//– Border –/

#border {

display: flex;

justify-content: center;

padding: 0px 0px 0px 0px;

margin: 100px 0px 100px 0px;

}

.circle{

transition: all 1.0s;

}

.bg{

background: linear-gradient(to right, #fff, #000);

border-radius: 50%;

width: 100px;

height: 100px;

padding: 10px 10px 10px 10px;

margin: 0px 0px 0px 0px;

animation: animate-cw 5s linear infinite;

}

.spinner{

width: 100px;

height: 100px;

padding: 10px 10px 10px 10px;

margin: -120px 0px 0px 0px;

animation: animate-ccw 9s linear infinite;

z-index: 1;

}

input[type=checkbox]{

display: none;

}

label{

display: flex;

justify-content: space-around;

height: 100%;

width: 100%;

cursor: pointer;

z-index: 3;

}

input[type=checkbox]:checked ~ .ball-01 > .circle{

transform: scale(4);

transition: 2.0s ease;

}

/– @keyframes –//– @keyframes –/

@keyframes animate-cw{

0%{

transform: rotate(0deg);

}

100%{

transform: rotate(360deg);

}

}@keyframes animate-ccw{

0%{

transform: rotate(-0deg);

}

100%{

transform: rotate(-360deg);

}

}

2

I’ll try my best to take a look at it later today :slight_smile: At first glance, what you are trying to do should be doable by moving some things out into their own CSS classes.

3

Quick question. Do you want the animation to only stop spinning when it has grown in size (aka someone clicked on it)?

4

No.
http://davidsimonperry.com/E-about.html
I would like the yellow ball with the type and the blue and red background to enlarge together when clicked on and shrink when clicked on again.
If I can get the yellow ball to not spin so you can read it when clicked on I can launch this website.

5

HTML HTML HTML HTML

		<div class="luna animated bounceIn">
			<input type="checkbox" id="form" />
			<label for="form" class="ball">
				
				<div class="text">

					<div class="bgrd">
					</div>						
					
					<div class="moon">
					<img src="./images/pics/moon-type-04.png" width="100%" alt=""/>
					</div>
					
				</div>
				
			</label>
			
		</div>

		<div id="master">
			<div class="art-02">
				<div class="two">
					<img src="images/pics/Door-05-bG.png" width="100%" alt=""/>			
				</div>


			</div>

			<div class="art-03">
				<div class="three">
					<img src="images/pics/Door-05.png" width="100%" alt=""/>	
				</div>
			</div>
		</div>
		
	</div>

CSS CSS CSS CSS

/– Panels –//– Panels –//– Panels –/
#panels{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

/– Luna –//– Luna –//– Luna –/
.luna{
display: flex;
justify-content: space-around;
padding: 0px 0px 0px 0px;
margin: 240px 80px 0px 0px;
}

.text{
transition: all 1.0s;
}

.bgrd{
background: linear-gradient(to right, #ff0000, #19E5D5);
border-radius: 50%;
width: 110px;
height: 110px;
padding: 10px 10px 10px 10px;
margin: 0px 0px 0px 0px;
animation: animate-cw 4s linear infinite;
xxxz-index: -1;
}

.moon{
width: 100px;
height: 100px;
padding: 0px 0px 0px 0px;
margin: -115px 0px 0px 15px;
animation: animate-ccw 30s linear infinite;
z-index: 99;
}

/– Master –//– Master –//– Master –/
#master{
padding: 0px 0px 0px 0px;
margin: -330px 0px 0px 0px;
}

.art-02{
display: flex;
justify-content: space-around;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

.art-02 div{
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;

}

.two{
display: flex;
justify-content: center;
max-width: 801px;
min-width: 800px;
height: 0px;
padding: 0px 0px 0px 0px;
margin: auto;
xxxz-index: -2;
}

.two img{
display: flex;
justify-content: center;
/– OutSide –//– OutSide –/
border-top: 10px #FFB6B6 solid;
border-right: 10px #B62B2B solid;
border-bottom: 10px #940000 solid;
border-left: 10px #FF5757 solid;
box-shadow: 2px 4px 8px 2px rgba(0, 5, 10, 0.2),
0px 6px 20px 0px rgba(0, 0, 0, 0.19);
margin: auto;
}

/– Three –//– Three –//– Three –/
.art-03{
display: flex;
justify-content: space-around;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;

}

.art-03 div{
padding: 0px 0px 0px 0px;
margin: 5px 0px 0px 0px;

}

.three{
display: flex;
justify-content: center;
max-width: 801px;
min-width: 800px;
height: 0px;
padding: 0px 0px 0px 0px;
margin: auto;
xxxz-index: 1;

}

.three img{
display: flex;
justify-content: center;
/– InSide –//– InSide –/
border-top: 5px #840000 solid;
border-right: 5px #FF5757 solid;
border-bottom: 5px #FF7474 solid;
border-left: 5px #840000 solid;
margin: auto;
}

/– Enlarge –//– Enlarge –/
input[type=checkbox]{
display: none;
}

label{
display: flex;
justify-content: center;
height: 100%;
width: 100%;
cursor: pointer;
xxxz-index: 5;
}

input[type=checkbox]:checked ~ .ball > .text{
transform: scale(4);
transition: 2.0s ease;
}

/– @keyframes –//– @keyframes –/
@keyframes animate-cw{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}

}
@keyframes animate-ccw{
0%{
transform: rotate(-0deg);
}
100%{
transform: rotate(-360deg);
}
}

6

I got IT.
See this page
http://davidsimonperry.com/Z-about.html
I thank you for your time Mr. Kirupa.

7

That is really neat! Glad you figured it out :slight_smile: