How to give movement to a form with Javascript and CSS?

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.

Post Views: 74