1. De @keyframes
a fotogramas clave
@dgfrancisco

2. @dgfrancisco

3. www.eltiempo.com
www.elespectador.com
www.enter.co
www.caracoltv.com
www.elheraldo.co
www.shock.com

4. www.pio.la
www.mercalist.com
www.mercatiendas.com
www.mercaraiz.com
www.mercapets.com

5. oja.la

6. Mobile Vs Web
En los detalles esta el diablo
¿Por qué?

14. Wikipedia:
Un keyframe en animación y en video
es el punto inicial y final
de cualquier animación
@Keyframes

16. Para CSS,
Es la definición de un grupo de propiedades
a las que se le modifican valores
para recrear una animación
@Keyframes

17. A B

18. @Keyframes
Formula de la animación
animation:;
La forma en que se aplica la animación
+

19. @font-face {
font-family: miFuente;
src: url(../ruta/miFuente.woff);
}
div { font-family: miFuente;}

20. @keyframe nombre {
0%{ propiedad: valor;}
25%{ propiedad: valor;}
50%{ propiedad: valor;}
75%{ propiedad: valor;}
100%{ propiedad: valor;}
}

21. div { animation:
animation-name: nombre;
animation-duration: duración;
animation-timing-function: velocidad;
animation-delay: espera;
animation-iteration-count: repetición;
animation-direction: sentido;
animation-play-state: stop/play;
}

22. @keyframe nombre {
0%{ propiedad: valor;}
100%{ propiedad: valor;}
}
Propiedades:
Transformaciones
Propiedades
Transiciones

23. Propiedades:
Transformations
transform: rotate(angle);
transform: scale(value, [value]);
transform: skewX(value);
transform: skewY(value);
transform: translate(value [, value]);
transform: perspective(value);
matrix() - translate3d - scale3d - rotate3d

24. transform: rotate(angle);

25. transform: rotate(angle);
http://codepen.io/dgfrancisco/full/gDkwy
@keyframes rotar {
0% { transform: rotate(0deg); }
100% { transform: rotate(180deg);}
}
.ojala{
animation: rotar 1s linear infinite;
-webkit-animation: rotar 1s linear infinite;
}

26. transform: scale(value, [value]);

27. transform: scale(value, [value]);
http://codepen.io/dgfrancisco/full/vechn
@keyframes escalar {
0% { transform: scale(0,0); }
100% { transform: scale(1,1);}
}
.ojala{
animation: escalar 1s linear infinite;
-webkit-animation: escalar 1s linear infinite;
}

28. transform: skew(value);

29. transform: skew(value);
http://codepen.io/dgfrancisco/full/GFkwC
@keyframes sesgar {
0%, 50%, 100% { transform: skew(35deg,1deg); }
25%, 75% {transform: skew(-35deg,20deg);}
}
.ojala{
animation: sesgar 1s linear infinite;
-webkit-animation: sesgar 1s linear infinite;
}

30. transform: translate(value[, value]);

31. transform: translate(value, [value]);
http://codepen.io/dgfrancisco/full/fBesw
@keyframes trasladar {
0% {}
100% {transform: translate(300px,144px);}
}
.ojala{
animation: trasladar 1s linear infinite;
-webkit-animation: trasladar 1s linear infinite;
}

32. transform: perspective(value);

33. transform: perspective(value);
http://codepen.io/dgfrancisco/full/kGjnz
@keyframes perspectiva {
100% {transform: rotateX(150deg);}
}
.ojala{ animation: perspectiva .6s linear infinite; }
.contenedor{
perspective:150px;
-webkit-perspective:150px;
}

34. DEMOS
http://codepen.io/collection/trdlv/

35. http://daneden.github.io/animate.css/

36. http://www.justinaguilar.com/animations/index.html

37. http://www.css3maker.com/index.html

38. ¿Diseñador?