key frames css

CSS3 - Crear Animaciones - Animation - Keyframes

Bien perras, aca estoy de nuevo trayendoles un nuevo post para que puedan animar cosas con css 3 
siempre vamos a ver lo más elemental para que ustedes tengan una guia o un punto de partida en el cual puedan desenvolverse segun su creatividad o su obligacion jaja. 

Bueno, con CSS3 tenemos un problema, la compatibilidad, dado a que no todoslos usuarios tienen el mismo navegador, no todos los navegadores tienen las mismas funcionalidades ni el mismo motor de renderizado por lo que la propiedad ANIMATION va a ser compatible en.. : 

 

AHORA si los siguientes navegadores, no lo soportan, porque son putos.. 

 


Bien, ahora vamos a hacer un par de ejemplos simples para que puedan entender esto. 

primero vamos a hacer unapagina para agregarle animacion con CSS3 

 
 
 Mi Animación con css3  
 
div#animajazz{ 
width:100px; 
height:100px; 
position:relative; 
background:red; 
} 
 
 

 
  
 
 

NOTA: la propiedad POSITION es necesaria, porque, si no la definimos (en algun punto), la animacion no se va a reproducir. Si no me cree, intentelo usted mismo (es más saludable) 
ESTE ES NUESTRO PUNTO DEPARTIDA 

La propiedad animation tiene siete propiedades 

-animation-name, 
-animation-duration, 
-animation-timing-function, 
-animation-delay, 
-animation-iteration-count, 
-animation-direction. 
-animation-play-state 

animation-name 
Es la propiedad para darle un nombre a la animación 
sintaxis 
animation-name: keyframename;
keyframename : nombre de la animación 
Ejemplos -moz-animation-name:mymove; /* Firefox */ 
-webkit-animation-name:mymove; /* Safari y Chrome */ [/color]

Estan con el prefijo -moz-animation-propiedad y -webkit-animation-propiedad para que los navegadores los reconozcan y puedan usarlos de buena manera, ustedes ponganlo nomas 

-animation-duration 
define cuántos segundos o milisegundos una animación tarda en completar un ciclo. sintaxis 
animation-duration: tiempo;

El tiempo lo ponemos en segundos, por ejemplo "5s" 
aca tambien usamos los prefijos moz y webkit 
pero se van a convertir en 

-moz-animation-duration:5s; /* Firefox */ 
-webkit-animation-name:duration: 5s; /* Safari y Chrome */ 
tambien lo podemos poner en milisegundos, pero seria algo como "5000ms" 

-animation-timing-function 
define la velocidad de latransicion, es decir, si va a ser igual en todas las partes de la animación 
podemos poner nuestros propios valores, pero existen varios valores predeterminados, 

linear (La animación tiene la misma velocidad de principio a fin) 
ease (Por defecto. La animación tiene un comienzo lento, luego rápido, antes de que llegue, lento) 
ease-in (La animación tiene un comienzo lento) 
ease-out (Laanimación tiene un final lento) 
ease-in-out (La animación tiene tanto un comienzo lento y un final lento) 

agregandolo a nuestra funcion quedaria algo como 
-moz-animation-timing-function: linear; 
-webkit-animation-timing-function: linear; 


animation-delay 
Es un propiedad que indica cuando se inicia una animación 
sintaxis 
animation-delay: tiempo; 

El tiempo puede ser ensegundos (Ej: "4s" ) , o en milisegundos (Ej: "3000ms" ) 
a nosotros nos quedaria algo como 
-moz-animation-delay: 2s; /*Firefox*/ 
-webkit-animation-delay: 2s; /* Chrome y Safarix*/ 



animation-iteration-count 
Esta propiedad define cuántas veces una animación reproducir.el valor por defecto es 1. 
sintaxis: 
animation-iteration-count: valor;
el valor puede ser un numero entero o infinite,que se imaginaran que infinite repite una animacion para siempre. 

En nuestro caso vamos a poner 
-moz-animation-iteration-count:3; /* Firefox */ 
-webkit-animation-iteration-count:3; /*Safari and Chrome*/ 


animation-direction 
Esta propiedad define si la animación se reproducira a la inversa en ciclos alternos. 
Si el valor de la animación, la dirección es "alternativo", la...