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 todos los 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 una pagina para agregarle animacion con CSS3
<html>
<head>
<title> Mi Animación con css3 </title>
<style type="text/css">
div#animajazz{
width:100px;
height:100px;
position:relative;
background:red;
}
</style>
</head>
<body>
<div id="animajazz"> </div>
</body>
</html>
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 DE PARTIDA
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 la transicion, 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 (La animació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 en segundos (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 animación se reproducirá de forma normal cada vez impar (1,3,5, etc.) Y hacia atrás cada vez que sea par (2,4,6, etc ..).
Nota: Si la animación está definida para reproducirse sólo una vez, esta propiedad no tendrá ningún efecto.
sintaxis
animation-direction: normal|alternate;
normal : valor por defecto. La animación se reproduce normalmente
alternate: Si el valor de la animación, la dirección es "alternativo", la animación se reproducirá de forma normal cada vez impar (1,3,5, etc.) Y hacia atrás cada vez que sea par (2,4,6, etc ..).
animation-play-state
Directamente tiene dos estados que son, running | paused
sintaxis
animation-play-state: running | paused;
Bueno, para no escribir tantas lineas al pedo, hay una sintaxis que vamos a usar y que es más conveniente
es la siguiente
animation: name duration timing-function delay iteration-count direction;
en el caso de mozila
-moz-animation: name duration timing-function delay iteration-count direction;
y para Chrome y Safari
-webkit-animation: name duration timing-function delay iteration-count direction;
Obviamente podemos omitir valores
Ejemplo:
animation:moviendo 5s infinite;
-moz-animation:moviendo 5s infinite; /* Firefox */
-webkit-animation:moviendo 5s infinite; /*Safari y Chrome*/
ahorras más espacio que si hicieras algo como..
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari y Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
Bien hasta ahi es la parte teorica; ahora, vamos a algo más práctico
Vamos con @keyframe
con @keyframe lo que hacemos es directamente, agregar animación
su sintaxis es la siguiente:
@keyframes animationname {keyframes-selector {css-estilos;}}
NOTA: keyframes-selector puede ser OTRA animacion anidada (añadida) y los valores...
FROM - TO (desde- hacia)
ó
0% - 100% (0% es el principio de la animacion, y 100% seria el final)
Para mayor compatibilidad se usa este ultimo (0%-100%) y ..
En el codigo quedaria algo como
<html>
<head>
<title> Mi Animación con css3 </title>
<style type="text/css">
div#animajazz{
width:100px;
height:100px;
position:relative;
background:red;
animation:moviendo 5s infinite;
-moz-animation:moviendo 5s infinite; /* Firefox */
-webkit-animation:moviendo 5s infinite; /*Safari y Chrome*/
}
@keyframes moviendo
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-moz-keyframes moviendo /*Firefox*/
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes moviendo /* Safari y Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
</style>
</head>
<body>
<div id="animajazz"> </div>
</body>
</html>
Ejemplo completo (SI QUERES VERLO ENTRA EN )
<html>
<head>
<style type="text/css">
h3,h4{color:white; text-align:center}
a:link{text-decoration:none; color:white}
a{text-decoration:none; color:white}
a:visited{text-decoration:none; color:white}
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /*Safari y Chrome*/
}
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-moz-keyframes mymove /*Safari y Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari y Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
</style>
</head>
<body>
<p><b>Note:</b> Este Ejemplo No funciona en Internet Explorer ni en Opera.</p>
<div><h3>Seguime</h3><h4><a href="http://www.taringa.net/danijazzero" target="_blank">Danijazzero</a></h4></div>
</body>
</html>
Otro Ejemplo VERLO
Gracias hdps y nos vemos la proxima, si quieren más, siganme.. chau <3