7

Buenas noches estoy tratando de dar animación (que se mueva en su mismo sitio, solo ROTACIÓN no traslación) a un circulo con javascript y css pero no tengo idea. Hasta ahora solo tengo la esfera. solo falta darle la animación.

A continuación el el código, agradezco su apoyo.

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

2
  • ¿Cuál es el movimiento que deseas?
    – user128299
    el 19 dic. 2019 a las 2:43
  • Movimiento circular, desde el punto centro. el 19 dic. 2019 a las 2:47

2 respuestas 2

6

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

Con transform: translate(250px, 0) mueves un objeto mediante las coordenadas del plano cartesiano (x,y) y (-x,-y) y transition realizas la transición del elemento que deseas.

2
  • Esta excelente, pero que se mueva en su mismo sitio, solo ROTACIÓN no traslación. el 19 dic. 2019 a las 3:28
  • Edite la respuesta, utiliza transform: rotate(360deg) de acuerdo a lo que quieras. el 19 dic. 2019 a las 3:32
1
  • Puedes hacerlo a través de keyframes para establecer los estados de la animación a través de porcentajes de avance
  • Posterior en las propiedades de la animación usa animation-iteration-count con un valor de infinite para que el giro no se detenga
  • Usa la propiedad animation-duration con 1s de tiempo para indicar cuanto tiempo le va a tomar a la animación completar un ciclo es decir que vaya desde el 0% que establecimos hasta el 100% que es donde termina el efecto que estamos buscando
  • Con animation-timing-function vamos a indicar el comportamiento de la animación

Ejemplo

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo1</title>
      <style>
        #circulo {
            background: radial-gradient(circle at 65% 15%, white 1px, aqua 3%, darkblue 60%, aqua 100%);  
            height: 100px;
            width: 100px;
            border-radius: 50%;
            animation-name: rotate1;
            animation-timing-function: linear;
            animation-duration: 1s;
            animation-iteration-count: infinite;
        }
        @keyframes rotate1 {
          0%{
            transform: rotate( 0deg);
          }
          100%{
            transform: rotate(360deg);
          }
        }
      </style>
    </head>
    <body>
    <div id="circulo"></div>
    </body>
    </html>

Importante

Si no deseas que la animación sea permanente, entonces alcanza con quitar la propiedad y valor: animation-iteration-count: infinite;

Referencias

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.