Animando objetos con transiciones CSS. Aplicando transformaciones 3-D y 2-D. Animaciones con keyFrames. Trabajando con formularios

1. Creando interfaces de usuario
animadas y adaptables
Danae Aguilar Guzmán
MCT, MS, MCTS, MCP
danaeaguilar@gmail.com

2. Contenido del Módulo
 Animando objetos con transiciones CSS
 Aplicando transformaciones 3-D y 2-D
 Animaciones con keyFrames
 Trabajando con formularios

3. Animando objetos con transiciones
CSS
Nos permiten agregar efectos cuando
cambiamos de un estilo a otro, usando solo
CSS3
1. Especificar la propiedad CSS a la que
queremos agregar el efecto
2. Especificar la duración del efecto.

4. Animando objetos con transiciones
CSS
Transiciones:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
div:hover {
width: 500px;
}

5. Animando objetos con transiciones
CSS
Transiciones múltiples:
Las agregamos separadas por comas.
div {
width: 100px;
height: 100px;
background: blue;
transition: width 2s, height 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
div:hover {
width: 200px;
height: 200px;
transform: rotate(180deg);
-webkit-transform: rotate(180deg); /* Safari */
}

6. Animando objetos con transiciones
CSS
Propiedades de transición:
 transition
 transition-property
 transition-duration
 transition-timing-function
 transition-delay
div {
transition: width 1s linear 2s;
/* Safari */
-webkit-transition: width 1s linear 2s;
}

7. Animando objetos con transiciones
CSS
Propiedades de transición
div {
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 2s;
}

8. Aplicando transformaciones 3-D y 2-D
Transformaciones 2D.
Permiten cambiar la forma, tamaño y posición.
Chrome y Safari requieren el prefijo -webkit-
 translate()
 rotate()
 scale()
 skew()
 matrix()

9. Aplicando transformaciones 3-D y 2-D
Transformaciones 2D.
 transform: translate(50px,100px);
 transform: rotate(30deg);
 transform: scale(2,4);
 transform: skew(30deg,20deg);
 transform:matrix(0.866,0.5,-0.5,0.866,0,0);
div {
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}

10. Aplicando transformaciones 3-D y 2-D
Transformaciones 3D.
• rotateX()
• rotateY()
div {
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg);
}

11. Animaciones CSS3
CSS3 @keyframes
Definiendo:
@keyframes miAnimacion
{
from {background: red;}
to {background: yellow;}
}
/* Safari y Chrome */
@-webkit-keyframes miAnimacion
{
from {background: red;}
to {background: yellow;}
}

12. Animaciones CSS3
CSS3 @keyframes
Aplicando:
.animar {
animation: miAnimacion 5s;
-webkit-animation: miAnimacion 5s;
}

13. Animaciones CSS3
CSS3 @keyframes
Aplicando por partes:
@keyframes miAnimacion
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

14. Ajustando el UI basado en media
queries
Media queries
Permiten adaptar el UI para diferentes tamaños
Especifican media types y alguna condición:
Tipo screen, y debe ser a color
@media (max-width: 480px) {
...
}
<link rel="stylesheet"
media="screen and (color)"
href="ejemplo.css" />

15. Ajustando el UI basado en media
queries
Media queries
Media all puede obviarse. Estos dos son
iguales:
Se puede especificar la orientación de la
página:
@media all and (min-width:500px) { … }
@media (min-width:500px) { … }
@media (orientation: portrait) { … }
@media all and (orientation: portrait) { … }

16. Ajustando el UI basado en media
queries
Media queries
Se puede especificar varios separándolos por
comas:
Si la lista es vacia, se evalua a true:
@media screen and (color),
projection and (color) { … }
@media all { … }
@media { … }

17. Ajustando el UI basado en media
queries
Media queries
(device-width: 800px)
Se aplicará cuando el ancho sea exactamente
800px
(device-height: 600px)
Se aplicará cuando el alto sea exactamente
600px

18. Ajustando el UI basado en media
queries
Orientacion
(orientation:portrait)
(orientation:landscape)
Aspect ratio
@media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 32/18) { … }
@media screen and (device-aspect-ratio: 1280/720) { … }
@media screen and (device-aspect-ratio: 2560/1440) { … }
Aplican a dispositivos de 1280 por 720 pixeles.

19. Trabajando con formularios
autocomplete
<form autocomplete="on">
Nombre<input type="text" name="fname"><br>
Apellido:
<input type="text" name="lname"><br>
E-mail:
<input type="email" name="email"
autocomplete="off"><br>
<input type="submit">
</form>

20. Trabajando con formularios
novalidate
autofocus
<form novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
Nombre:<input type="text"
name="nombre" autofocus>

21. Trabajando con formularios
form
Permite tener un input fuera del form
<form id="form1">
E-mail:
<input type="email" name="user_email">
<input type="submit">
Nombre:<input type="text" name="nombre">
</form>
Apellido:
<input type="text" name="lname" form="form1">

22. Trabajando con formularios
formaction
Permite diferentes actions para los botones
submit
<form action="pagina1.aspx">
Nombre:
<input type="text" name="fname"><br>
Apellido:
<input type="text" name="lname"><br>
<input type="submit" value="enviar"><br>
<input type="submit" formaction="pagina2.aspx"
value="enviar 2">
</form>

23. Trabajando con formularios
formnovalidate
Imagen con height y width
Usar una imágen como boton de submit
<input type="submit" formnovalidate
value="Enviar sin validar">
<input type="image" src="img_submit.gif"
alt="Enviar" width="48" height="48">

24. Trabajando con formularios
list
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

25. Trabajando con formularios
multiple
pattern
<form >
Seleccione varias imágenes:
<input type="file" name="img" multiple>
<input type="submit">
</form>
Código: <input type="text"
name="codido" pattern="[A-Za-z]{3}"
title="Codigo de tres letras">

26. Trabajando con formularios
placeholder
required
Nombre: <input type="text" name="fname"
placeholder="Nombre">
Nombre de Usuario:
<input type="text" name="usrname" required>

27. Trabajando con formularios
points
min y max
<input type="number" name="points" step="3">
Fecha mayor a 2000-01-01:
<input type="date" min="2000-01-02">
<input type="number" min="1" max="5">