This is an example of how to place animation on the form sheet,

1 - We go to the page of https://github.com/animate-css/animate.css to download the .zip of the animations.

2 - Downloading the .zip we proceed to load the downloaded file as an external library of the scriptcase.

      - You can follow this manual: https://www.scriptcase.net/docs/en_us/v9/manual/07-tools/05-external-libraries/

3 - Once the external library has been loaded, we go to the OnApplicationInit event of our form.

      - Here we proceed to call our external library.

      - To apply our animation to our form, we need the form ID, we proceed to execute the form and then we click on inspect element, where we must find the form class, in this case it is called scFormPage

4 - We take this class name scFormPage and add to our code of external libraries.

      An example would be the following code in the OnApplicationInit event:

?>

<linkrel="stylesheet" type="text/css" href= "<?phpsc_url_library('sys', 'animatecss','source/bouncing_entraces/bounceIn.css');?>">

<style> // Donde se realiza la llamada a la librería

.scFormPage { //aqui se utiliza el nombre del formulario obtenido anteriormente

  animation-name:bounceIn;  //Se coloca el nombre de la animación

 animation-duration:4s;

}

@keyframesbounceIn {

  from,20%, 40%, 60%, 80%,

  to{

   animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);

  }

  0%{

    opacity:0;

    transform:scale3d(0.3, 0.3, 0.3);

  }

  20%{

    transform:scale3d(1.1, 1.1, 1.1);

  }

  40%{

    transform:scale3d(0.9, 0.9, 0.9);

  }

  60%{

    opacity:1;

    transform:scale3d(1.03, 1.03, 1.03);

  }

  80%{

    transform:scale3d(0.97, 0.97, 0.97);

  }

  to{

    opacity:1;

    transform:scale3d(1, 1, 1);

  }

}

.bounceIn{

 animation-duration:0.75s;

  animation-name:bounceIn;

}

</style>

<?PHP

5 - We proceed to execute the form, where we will visualize the animation.