CSS3 animación y animación JS

animaciones CSS3

animación es una propiedad abreviada para establecer las seis propiedades animadas.

reglamentos animación de renombre tienen que estar ligado al nombre de fotogramas clave del selector
animación duración de tiempo determinado que se necesita para completar la animación de
animación-timimg-función de animación predeterminada perfil de velocidad.
animación de retardo especificado retraso antes del inicio de la animación
animación-iteración contar el número de veces que la animación debe desempeñar
Si las disposiciones de la animación dirección deben activar la reproducción inversa de la animación

Nota debe proporcionar propiedad de animación duración o de larga 0

animación-timing-función de animación perfil de velocidad predeterminado

animación de línea de principio a fin a la misma velocidad
facilitar la velocidad por defecto a baja velocidad, a continuación, acelerar, frenar antes de finales de
facilidad en la animación a baja velocidad del comienzo
animación facilidad hacia fuera en el extremo de baja
la facilidad de entrada-salida animaciones a baja velocidad del comienzo y fin

Si las disposiciones de la animación dirección deben activar la reproducción inversa de la animación

noramal por defecto. Animación debe desempeñar la normalidad
animación alternativo debe invertir la rotación

http://js.jirengu.com/hupecativa/2/edit

TRANSICIÓN propiedad excesiva

Por defecto todos 0 0 facilidad

la lista de nombres CSS disposiciones de transición de la propiedad de atributos establecer la propiedad nombre de efectos de transición ninguno CSS tiene ningún efecto todas las propiedades se obtienen efecto global de las definiciones de propiedades aplicar efectos de transición
transición de duración en milisegundos durante un tiempo predeterminado o el número de segundos que tarda efecto excesivo tiempo requerido
efectos de transición-timing-función de un perfil de velocidad velocidad predeterminada
Cuando comienza efecto de transición de retardo definido sobre-

transición-timing-función de efecto de conmutación de la velocidad

cúbico-Bezier (n, n, n, n) poseer valor de la función definida

https://jsbin.com/fejofoqeca/edit?html,output

animación JS

El conocimiento Point

1. El cambio de posición relativa

Un elemento de la página para móviles, que continuó a cambiar su página de posición relativa en un momento será capaz de visualizar la animación

Acerca de desplazamiento

El elemento de ajuste de posición de propiedad
la parte superior, la propiedad de desplazamiento a la izquierda se puede proporcionar
offsetLeft, offsetTop propiedad desplazamiento puede ser proporcionada

El 2.obj.offsetwidth diferencia y obj.style.width

obj.offsetwidth atributo es de sólo lectura, no puede ser copiado, el resultado es un puro digital
obj, existe premisa offsetWidth usando el estilo en línea etiqueta de elemento de estilo y la anchura del atributo caso. asignable legible

3.requestAnimationFrame (recomendado)

window.requestAnimationFrame (devolución de llamada) para aceptar la función de devolución de llamada. más fluidez

1 <! DOCTYPE html>
 2 <html lang = "en">
 3 <head>
 4      <meta charset = "UTF-8">
 5      <meta name = "viewport" content = "width = dispositivo de ancho, inicial escala = 1,0" >
 6      <title> Documento </ title>
 7 </ head>
 8 <style>
 9    #ball {
 10      position: absolute;
11      restante: 0 ;
12      Ancho: 30px;
13      altura: 30px;
14      de fondo: rojo;
15      frontera de radio: 50% ;
 <Body>
 19.      <Div ID = "Ball"> </ div>
 20 está </ body>
 21 es    <Script>
 22 es      var offsetX = 300; // movimiento distancia 
23 es  var moveOffset = 0; // esto ha movido una distancia 
24  var PASO = 5; // cada distancia de movimiento de 
25  
26 es  función mover () {
 27      IF (moveOffset < offsetX) {
 28        la console.log (ball.style.left)
 29          ball.style.left = la parseInt (la getComputedStyle (bola). izquierda) + PASO + 'PX'
 30          moveOffset + = PASO
 31 es         requestAnimationFrame (mover, 5 )
 32      }
 33  }
 34  move ()
 35    </ script>
 36 </ html>

Uso setTimeout poner en práctica (no se recomienda) y desactivación

1 <! DOCTYPE html>
 2 <html lang = "en">
 3 <head>
 4      <meta charset = "UTF-8">
 5      <meta name = "viewport" content = "width = dispositivo de ancho, inicial escala = 1,0" >
 6      <title> Documento </ title>
 7 </ head>
 8 <style>
 9    #ball {
 10      position: absolute;
11      restante: 0 ;
12      Ancho: 30px;
13      altura: 30px;
14      de fondo: rojo;
15      frontera de radio: 50% ;
 <Body>
 19.      <Div ID = "Ball"> </ div>
 20 está </ body>
 21 es    <Script>
 22 es  var offsetX = 300; // movimiento distancia 
23 es  var moveOffset = 0; // esto ha movido una distancia 
24  var PASO = 5; // cada distancia de movimiento de 
25  
26 es  función mover () {
 27      IF (moveOffset < offsetX) {
 28        la console.log (ball.style.left)
 29          ball.style.left = la parseInt (la getComputedStyle (bola). izquierda) + PASO + 'PX'
 30          moveOffset + = PASO
 31 es         setTimeout (mover, 5 )
 32      }
 33  }
 34  move ()
 35    </ script>
 36 </ html>

CSS3 animación y animación JS

Supongo que te gusta