==== Animaciones a nivel de Frame ====
\\
De la misma manera que se han implementado las animaciones para Colecciones y Grupos, también se han implementado animaciones a nivel de frames. \\
\\
Estas se habilitan definiendo los atributos animation-in y animation-out en la declaración del frame, que pueden tomar los valores siguientes:\\
\\
|<50%>|
^ Efectos                                                                                                                                                 ^ Valor del Atributo animation_in/out     ^
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_frame:start#:Entrada/Salida desde arriba|Entrada/Salida desde arriba]]          | "##PUSH_DOWN_IN##" o "##PUSH_OUT##"     |
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_frame:start#:Entrada/salida desde abajo|Entrada/salida desde abajo]]            | "##PUSH_IN##" o "##PUSH_DOWN_OUT##"     |
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_frame:start#:Entrada/salida por la izquierda|Entrada/salida por la izquierda]]  | "##LEFT_IN##" o "##RIGHT_OUT##"         |
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_frame:start#:Entrada/salida por la derecha|Entrada/salida por la derecha]]      | "##RIGHT_IN##" o "##LEFT_OUT##"         |
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_frame:start#:Rotación 3D|Rotación 3D]]                                          | "##ROTATE3D_IN##" o "##ROTATE3D_OUT##"  |
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_frame:start#:Efecto de ZOOM|Efecto de ZOOM]]                                    | "##ZOOM_IN##" o "##ZOOM_IN##"           |
| [[wiki:2.-desarrollo-app:2.5.-controles-by-xone:animaciones:animaciones_frame:start#:Aparece/Desaparece|Aparece/Desaparece]]                            | "##ALPHA_IN##" o "##ALPHA_OUT##"        |
\\
\\

=== Entrada/Salida desde arriba ===
|<50%>|
^ Atributo                      ^ Valor del atributo                     ^
| animation_in / animation_out  | "##PUSH_DOWN_IN##" o "##PUSH_OUT##"  |
<code javascript>
<frame name="frmTitleCalendario" height="100%" align="center|top" width="96%" lmargin="2%" animation-in="##PUSH_DOWN_IN##" animation-out="##ROTATE3D_OUT##">
</code>
\\
=== Entrada/Salida desde abajo ===
|<50%>|
^ Atributo                      ^ Valor del atributo                     ^
| animation_in / animation_out  | "##PUSH_IN##" o "##PUSH_DOWN_OUT##"  |
<code javascript>
<frame name="frmTitleCalendario" height="100%" align="center|top" width="96%" lmargin="2%" animation-in="##PUSH_IN##" animation-out="##ROTATE3D_OUT##">
</code>
\\
=== Entrada/salida por la izquierda ===
|<50%>|
^ Atributo                      ^ Valor del atributo               ^
| animation_in / animation_out  |  "##LEFT_IN##" o "##RIGHT_OUT##" |
<code javascript>
  <frame name="frmnuevochat" animation-in-delay="250" animation-out-delay="250" animation-out="##LEFT_IN##" disablevisible="MAP_VERFLOTANTE=0" bgcolor="#ffffff" modal="true" floating="true" top="0" left="0" width="100%" height="100%">
</code>
\\
=== Entrada/salida por la derecha ===
|<50%>|
^  Atributo                     ^  Valor del atributo              ^
| animation_in / animation_out  | "##RIGHT_IN##" O "##LEFT_OUT##"  |
<code javascript>
 <frame name="frmnuevochat" animation-in-delay="250" animation-out-delay="250" animation-in="##RIGHT_IN##" animation-out="##LEFT_OUT##" disablevisible="MAP_VERFLOTANTE=0" bgcolor="#ffffff" modal="true" floating="true" top="0" left="0" width="100%" height="100%">
</code>
\\
=== Rotación 3D ===
|<50%>|
^ Atributo                      ^ Valor del atributo                     ^
| animation_in / animation_out  |  "##ROTATE3D_IN##" o "##ROTATE3D_OUT##"|
<code javascript>
   <frame name="frmTitleCalendario" height="100%" width="96%" lmargin="2%" animation-in="##PUSH_IN##" animation-out="##ROTATE3D_OUT##">
</code>
\\
=== Efecto de ZOOM ===
|<50%>|
^ Atributo                      ^ Valor del atributo                     ^
| animation_in / animation_out  | "##ZOOM_IN##" o "##ZOOM_IN##"     |
<code javascript>
   <frame name="frmTitleCalendario" height="100%" width="96%" lmargin="2%" animation-in="##ZOOM_IN##">
 </code>
\\
=== Aparece/Desaparece ===
|<50%>|
^ Atributo                      ^ Valor del atributo                     ^
| animation_in / animation_out  |  "##ALPHA_IN##" o "##ALPHA_OUT##"      |
<code javascript>
   <frame name="frmTitleCalendario" height="100%" width="96%" lmargin="2%" animation-in=""##ALPHA_IN##"">
</code>
\\
<note tip>Nótese que se hace uso en algunas animaciones del atributo **animation-in-delay="250"** o **animation-out-delay="250"** conjuntamente con el tipo de animación, este se utiliza para definir el tiempo que èsta se ejecuta.</note>
\\
**Ejemplos de animaciones definidas en .css:**
\\
 
<code javascript>
.FrameAnimateFromTop
{
	animation-in-delay:500;
	animation-out-delay:500;
 
	/* Entra y sale por arriba. */
	animation-in:##PUSH_DOWN_IN##;		/* Aparece por arriba */
	animation-out:##PUSH_OUT##;		/* Se va por arriba */
}


.FrameAnimateFromBottom
{
	animation-in-delay:500;
	animation-out-delay:500;
 
	/* Entra y sale por abajo. */
	animation-in:##PUSH_IN##;		/* Aparece por abajo */
	animation-out:##PUSH_DOWN_OUT##; 	/* Se va por abajo */
}
 
.FrameAnimateFromRight
{
	animation-in-delay:500;
	animation-out-delay:500;
 
	/* Entra y sale por la derecha. */
	animation-in:##RIGHT_IN##;
	animation-out:##LEFT_OUT##;
}
 
.FrameAnimateFromLeft
{
	animation-in-delay:500;
	animation-out-delay:500;
 
	/* Entra y sale por la izquierda. */
	animation-in:##LEFT_IN##;
	animation-out:##RIGHT_OUT##;
}
 
.FrameAnimateRotate3D
{
	animation-in-delay:500;
	animation-out-delay:500;
 
	/* Entra y sale rotando en 3D. */
	animation-in:##ROTATE3D_IN##;
	animation-out:##ROTATE3D_OUT##;
}
 
.FrameAnimateAlpha
{
	animation-in-delay:500;
	animation-out-delay:500;
 
	/* Aparece y desaparece;. */
	animation-in:##ALPHA_IN##;
	animation-out:##ALPHA_OUT##;
 
}
 
.FrameAnimateZoom
{
	animation-in-delay:500;
	animation-out-delay:500;
 
	/* ZOOM. */
	animation-in:##ZOOM_IN##;
	animation-out:##ZOOM_OUT##;	
}

</code>