transición animación css y animación

Artículo de referencia: http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

1. transición uso básico:

<! DOCTYPE HTML> 
<HTML lang = "ES"> 
  <head> 
    <Meta charset = "UTF-8." /> 
    <Nombre de Meta = "la ventana gráfica" CONTENT = "width = Dispositivo de ancho, Initial-escala = 1,0" / > 
    <title> Documento </ title> 
    <style> 
      cuerpo, 
      HTML { 
        altura: 100%; 
        anchura: 100%; 
        padding: 0; 
        margin: 0; 
      } 
      IMG { 
        anchura: 50px; 
        altura: 50px; 
        el display: block; 
        margen : auto; 
        transición: LS; // Si no hay cambios son inmediatamente por encima de ratón img sobre la transición, junto con esta propiedad, que va a cambiar el proceso durante un segundo 
      } 
      img:hover { 
        anchura: 500px;
        hover { altura: 500px; 
      }
    </ style> 
  </ head> 
  <body> 
    <img src = "./ o_200404110308weixin_20191025171935.jpg" alt = "" /> 
  </ body> 
</ html>

　También podemos especificar la altura o anchura de los cambios de propiedad, etc.

      img { 
        anchura: 50px; 
        altura: 50px; 
        bloqueo de pantalla; 
        margen: auto; 
        transición: altura 1s; 
      }

　Los medios de redacción que sólo la altura img atributo excesiva duración de 1s, si desea cambiar la variación de la altura de ancho, se puede especificar el parámetro de retardo

      img { 
        anchura: 50px; 
        altura: 50px; 
        bloqueo de pantalla; 
        margen: auto; 
        Anchura Altura 1s, 1s 1s;: Transición 
      }

　　tasa de cambio del estado de incumplimiento TRANSICIÓN no es uniforme, sino que se reduzca lentamente, que se llama facilidad

      img { 
        anchura: 50px; 
        altura: 50px; 
        bloqueo de pantalla; 
        margen: auto; 
        transición: altura 1s, 1s 1s ancho facilidad; 
      }

　　Además del valor de la facilidad, hay modos adicionales

1. lineal: uniforme 
2.ease de entrada: de lento a rápido 
3.ease de salida: de rápido a lento 
función 4.cubic-Bezier: el modo de velocidad personalizada

　　cúbicas Bézier puede utilizar herramientas URL: https://cubic-bezier.com/#.17,.67,.83,.67 Para personalizar

img { 
    transición: 1s altura cúbico-Bezier (0,83, 0,97, .05,1.44); 
}

　　Notas del uso de transición:

　　　　1. En la actualidad los principales navegadores ya soportan transición sin prefijo, puede ser muy seguro de usar

　　　　2. No todos los atributos de transición CSS son compatibles

　　　　3. necesidad transición a saber claramente los valores específicos de inicio y estados finales, que se establece si el inicio o el final de esa altura: auto, no se anima, hay una situación similar, display: none a fondo bloque: url (foo, jpg) a url (bar.jpg), etc.

la transición de limitaciones:

　　　　1. TRANSICIÓN requerido para activar un evento, así que no puedo disparado automáticamente cuando se carga la página

　　　　2.transition es desechable, no puede repetirse, a no ser disparado de nuevo

　　　　3.transition sólo dos estados

2.Animation

　　En primer lugar, css Anmiation necesidad de especificar la duración del ciclo de animación

      .donghua { 
        animación: arco iris 1s; 
      }

　　El código anterior diseño de la tabla, .donghua esta clase para agregar una animación, es necesario definir efecto de animación animación arco iris

      @keyframes arco iris { 
        0% { 
          fondo: rojo; 
        } 
        50% { 
          fondo: naranja; 
        } 
        100 {% 
          fondo: yellowgreen; 
        }

　　animaciones de activación

    <div id = "div1"> </ div> 
    <botón onclick = "donghua ()">点我</ button> 
    <script> 
      dejar que div1 = document.getElementById ( 'div1') 
      función donghua () { 
        div1.classList .add ( 'donghua') 
      } 
    </ script>

　　Por defecto, la animación sólo se reproducirá una vez, añadiendo una clave infinita permite la animación de juego ilimitado

      .donghua { 
        animación: 1s infinito arco iris; 
      }

　También puede especificar un número determinado de veces para reproducir películas de espalda

      .donghua { 
        animación: arco iris 1s 3; 
      }

　　Después del final de la animación, se volverá inmediatamente a su estado inicial desde el fin del estado. Si desea mantener la animación se puede utilizar al final del estado

propiedades-fill-modo de animación.

      .donghua { 
        animación: arco iris 1s hacia delante; 
      }

　　Otros valores de la animación-fill-mode

1. Ninguno: volver defecto al principio de la animación no indicó 
2.backwards: dejar que la parte posterior animación para el estado de la primera trama 
3.forwars: Estado Fin

　　A veces, la reproducción de la animación se detiene de repente, a continuación, la parte posterior salto por defecto al inicio de la situación de animación, ubicación, si desea mantener el final de la animación, el uso de la propiedad-play-estado de animación

      .donghua { 
        animación: 1s infinito arco iris; 
        animación-play-Estado: en pausa; 
      } 
      .Donghua: hover { 
        animación-play-Estado: correr; 
      }