==== 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##" |
\\
=== Entrada/Salida desde abajo ===
|<50%>|
^ Atributo ^ Valor del atributo ^
| animation_in / animation_out | "##PUSH_IN##" o "##PUSH_DOWN_OUT##" |
\\
=== Entrada/salida por la izquierda ===
|<50%>|
^ Atributo ^ Valor del atributo ^
| animation_in / animation_out | "##LEFT_IN##" o "##RIGHT_OUT##" |
\\
=== Entrada/salida por la derecha ===
|<50%>|
^ Atributo ^ Valor del atributo ^
| animation_in / animation_out | "##RIGHT_IN##" O "##LEFT_OUT##" |
\\
=== Rotación 3D ===
|<50%>|
^ Atributo ^ Valor del atributo ^
| animation_in / animation_out | "##ROTATE3D_IN##" o "##ROTATE3D_OUT##"|
\\
=== Efecto de ZOOM ===
|<50%>|
^ Atributo ^ Valor del atributo ^
| animation_in / animation_out | "##ZOOM_IN##" o "##ZOOM_IN##" |
\\
=== Aparece/Desaparece ===
|<50%>|
^ Atributo ^ Valor del atributo ^
| animation_in / animation_out | "##ALPHA_IN##" o "##ALPHA_OUT##" |
\\
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.
\\
**Ejemplos de animaciones definidas en .css:**
\\
.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##;
}