Esto es un ejemplo de como colocar animación a la hoja del formulario,
1 - Nos dirigimos ala pagina de https://github.com/animate-css/animate.css para descargar el .zip de las animaciones.
2 - Descargado el .zip procedemos a cargar el archivo descargado como librería externadel scriptcase.
- Puede seguir este manual:https://www.scriptcase.net/docs/es_es/v9/manual/07-tools/05-external-libraries/
3- Una vez realizado la carga de la librería externa, nos dirigimos al evento OnApplicationInit de nuestro formulario.
- Aquí procedemos al llamado de nuestra librería externa.
- Para aplicar nuestra animación a nuestro formulario, necesitamos del ID del formulario, procedemos a ejecutar el formulario y luego hacemos clic en inspeccionar elemento, donde debemos buscar la clase delformulario, en este caso se llama scFormPage
4 - Tomamos dicho nombre de la clase scFormPage y agregamos a nuestro código delibrerias externas.
Un ejemplo seria el siguiente código en el evento OnApplicationInit:
?>
<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 - Procedemos a ejecutar el formulario, donde visualizaremos la animación.