Utilice animate.css animación plug-in

sitio web oficial: https: //daneden.github.io/animate.css/

 

<! DOCTYPE html > 
< html lang = "en" > 
< cabeza > 
    < meta charset = "UTF-8" > 
    < título > Documento </ título > 
    < enlace rel = "stylesheet" tipo = "text / css" href = "https : //cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" > 
    < estilo > 
        #boxOne { 
          anchura : 100px ;
          fondo : paleturquoise ; 
          margen : 100px automático ; 
        } 

        #Box { 
          anchura : 100px ; 
          altura : 100px ; 
          fondo : paleturquoise ; 
          margen : 100px automático ; 
        } 
        .Container { 
            text-align : centro ; 
        } 
    </ Estilo > 
</ cabeza > 
< cuerpo > 
    <div los mencionados ID = "boxOne"   clase = "rebote animado" > carga la página para activar la animación </ div > 
    < HR /> 
    < div la mencionada ID = "caja" > haga clic en evento de animación </ div > 
    < div clase = "contenedor" > < el botón de lo anterior mencionado ID = "Bot" > haga clic para activar la animación </ el botón > </ div > 


    < script > 
        función animateCss (Elemento, animationName,la devolución de llamada) { 

          / * Obtener pase al * / 
          const Nodo =document.querySelector (Element); 

          / * a los elementos más clase base animados, así como la clase de animación * / 
          node.classList.add ( ' animada ' , animationName); 

          función handleAnimationEnd () { 

            / * eliminar las clases de animación y clases base * / 
            node.classList.remove ( ' animado ' , animationName); 

            / * de levantar el actual elemento de detectores de eventos * / 
            node.removeEventListener ( ' el animationEnd ' , handleAnimationEnd);     / * Si hay una función de devolución de llamada que se ejecuta la función de devolución de llamada * / 

            SI ( typeof la devolución de llamada ===  ' función' ) Devolución de llamada (); 
          } 

          / * por el detector de eventos, cuando el final de la animación, ejecutado función handleAnimationEnd * / 
          node.addEventListener ( ' el animationEnd ' , handleAnimationEnd); 

        } 

          / * Haga clic en el botón para la función animateCss gatillo * / 
        btn.onclick =  función () { 
          animateCss ( ' #box ' , ' RubberBand ' ) 
        }; 
    </ script > 
</ cuerpo > 
</ HTML >