Question:
Good evening, I'm trying to give animation (moves in the same place, only ROTATION not translation) to a circle with javascript
and css
but I have no idea. So far I only have the sphere. just need to give the animation.
Below is the código
, I appreciate your support.
.ball {
display: block;
width: 150px;
height: 150px;
margin: 50px auto 0;
border-radius: 50%;
}
.b1 {
background: radial-gradient(circle at 65% 15%, white 1px, aqua 3%, darkblue 60%, aqua 100%);
}
<div class="ball b1"></div>
Answer:
.ball {
position: absolute;
width: 150px;
height: 150px;
margin: 50px auto 0;
border-radius: 50%;
}
.init {
top: 45%;
left: 44%;
}
.b1 {
background: radial-gradient(circle at 65% 15%, white 1px, aqua 3%, darkblue 60%, aqua 100%);
}
#box:hover .move-right {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
/** Chrome & Safari **/
-o-transform: rotate(360deg);
/** Opera **/
-moz-transform: rotate(360deg);
/** Firefox **/
}
.ball {
position: absolute;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out;
/** Chrome & Safari **/
-moz-transition: all 2s ease-in-out;
/** Firefox **/
-o-transition: all 2s ease-in-out;
/** Opera **/
}
<div id="box" class="one">
<div class="ball init b1 move-right"></div>
</div>
With transform: translate(250px, 0)
you move an object using the coordinates of the cartesian plane (x,y) and (-x,-y) and transition
you make the transition of the element you want.