Iniciar sesión

Wolves · 09-11-2013, 10:15 PM

Hola, hoy les enseñare la forma correcta de usar keyframes, una función en css3, en ella podemos crear funciones así como javascript que luego se ejecutaran al ser llamados, la parte mala de esto es que no todos los navegadores lo interpretan Triste

por el momento esta propiedad solo se puede apreciar en Google Chrome, Safari y Firefox, además es recomendable tener estos navegadores actualizados a su ultima versión, si van a utilizar lo que mostrare en esta entrada quiero que tomen en cuenta eso Sonrisa

muy bien comencemos

Primero vamos con el efecto y luego con el acabado y su explicación.

copia y pega el siguiente código css en donde tengas los estilos de tu web

Código:
@keyframes traslade {/*Nombre del frame*/

   from,8%  { transform: rotateY(0deg);}/*Empiesa la animacion*/

   16%,24%  { transform: rotateY(60deg);}

   32%,40%  { transform: rotateY(120deg);}

   48%,56%     { transform: rotateY(180deg);}

   64%,72%    { transform: rotateY(240deg);} 

   80%,88%    { transform: rotateY(300deg);} 

   96%,to    { transform: rotateY(360deg);}/*Termina la animacion*/

}

@-webkit-keyframes traslade {/*Nombre del frame Chrome y Safari*/

   from,8%  { -webkit-transform: rotateY(0deg);}/*Empiesa la animacion*/

   16%,24%  { -webkit-transform: rotateY(60deg);}

   32%,40%  { -webkit-transform: rotateY(120deg);}

   48%,56%     { -webkit-transform: rotateY(180deg);}

   64%,72%    { -webkit-transform: rotateY(240deg);} 

   80%,88%    { -webkit-transform: rotateY(300deg);} 

   96%,to    { -webkit-transform: rotateY(360deg);}/*Termina la animacion*/

}

@-moz-keyframes traslade {/*Nombre del frame Firefox*/

   from,8%  { -moz-transform: rotateY(0deg);}/*Empiesa la animacion*/

   16%,24%  { -moz-transform: rotateY(60deg);}

   32%,40%  { -moz-transform: rotateY(120deg);}

   48%,56%     { -moz-transform: rotateY(180deg);}

   64%,72%    { -moz-transform: rotateY(240deg);}

   80%,88%    { -moz-transform: rotateY(300deg);}

   96%,to    { -moz-transform: rotateY(360deg);} /*Termina la animacion*/

}

#traslade {

    /*Code para Chrome y Safari*/

    -webkit-animation-duration: 20s; /*Tiempo que tarda la animacion (20 segundos)*/

    -webkit-animation-name: traslade; /*Nombre de nuestro frame*/

    -webkit-animation-iteration-count: infinite; /*duracion de la animacion*/

    /*Code para Firefox*/

    -moz-animation-duration: 20s; /*Tiempo que tarda la animacion (20 segundos)*/

    -moz-animation-name: traslade; /*Nombre de nuestro frame*/

    -moz-animation-iteration-count: infinite; /*duracion de la animacion*/

    /*indicamos el tipo de tranformacion*/

    -webkit-transform-style: preserve-3d;

    -moz-transform-style: preserve-3d;

    -ms-transform-style: preserve-3d;

    transform-style: preserve-3d;

    margin: 20px auto;

    padding: 30px;

    width: 200px;

    height: 150px;

}

#traslade img {

    background-color: #FFFFFF;

    border: 1px solid #CCCCCC;

    padding: 5px;

    position: absolute;

    text-align: center;

    width: 180px;/*Tamaño de cada imagen*/

}

.conten-efect-cuatro {

    -moz-perspective:700px; /*perspectiva del objeto (Firefox)*/

    -webkit-perspective: 700px; /*perspectiva del objeto (Chrome)*/

    perspective: 700px;

}

/*posicion que mantiene cada foto*/

#photo-uno {

    -webkit-transform: rotateY(0deg) translateZ(200px);

    -moz-transform: rotateY(0deg) translateZ(200px);

    transform: rotateY(0deg) translateZ(200px);

}

#photo-dos {

    -webkit-transform: rotateY(-60deg) translateZ(200px);

    -moz-transform: rotateY(-60deg) translateZ(200px);

    transform: rotateY(-60deg) translateZ(200px);

}

#photo-tres {

    -webkit-transform: rotateY(-120deg) translateZ(200px);

    -moz-transform: rotateY(-120deg) translateZ(200px);

    transform: rotateY(-120deg) translateZ(200px);

}

#photo-cuatro {

    -webkit-transform: rotateY(-180deg) translateZ(200px);

    -moz-transform: rotateY(-180deg) translateZ(200px);

    transform: rotateY(-180deg) translateZ(200px);

}

#photo-cinco {

    -webkit-transform: rotateY(-240deg) translateZ(200px);

    -moz-transform: rotateY(-240deg) translateZ(200px);

    transform: rotateY(-240deg) translateZ(200px);

}

#photo-seis {

    -webkit-transform: rotateY(-300deg) translateZ(200px);

    -moz-transform: rotateY(-300deg) translateZ(200px);

    transform: rotateY(-300deg) translateZ(200px);

}

/*FIN*/

Bien, terminamos con el Css, ahora Vamos con el HTML.

Copia y pega el siguiente codigo en donde desees el efecto

NOTA : Remplaza lo que esta en Negrita por tu imagen.

El resultado es el siguiente :

CLIC AQUÍ PARA VER DEMO OFICIAL LAGRIHOST

Okay, hemos implementado el keyframe ahora vamos con la explicación :

El efecto visto anteriormente es un frame translade, que pasa de imagen en imagen mostrado la cara de cada una por ves.

tomare como ejemplo la implementación : @keyframes lagrihost { "lagrihost" es el nombre del frame, si ustedes crean uno solo tienen que ponerle un nombre, puede ser el que ustedes quieran, ahora seguiremos con la estructura:

ATENCIÓN ESTO ES SOLO UN EJEMPLO, NO SON IGUALES LAS PROPORCIONES NI PROPIEDADES DEL EFECTO DADO.

Código:
@-moz-keyframes lagrihost { ← el corchete abre nuestro frame

    from {-moz-transform: rotateY(0deg);} ← "from" indica como empiesa la animacion

    to   {-moz-transform: rotateY(-360deg);} ← y "to" indica como terminara

} ← asi como lo abrimos nuestro frame aqui lo cerramos

ahora ya tenemos nuestro keyframe creado, para llamarlo hacemos lo siguiente,

cremos una nueva regla ya sea id o class

Código:
<div class="conten-efect-cuatro"> ← indicamos la Clase mantenida, en este caso "La perspectiva"

<div id="traslade">   ← indicamos el nombre de nuestro keyframe

Bueno espero les allá gustado mi aporte, me llevo tiempo hacer el efecto y la explicación... Espero les guste y le den un uso.

***Kevinex*** · 09-11-2013, 10:29 PM

0

Que excelentes @Wolves y el demo Sorprendido

vos enseñando CSS3 que genial Lengua

También se pueden hacer iconos con algunos códigos CSS3 cada vez más interesantes. +1

**mariana** · 10-11-2013, 12:32 AM

0

gracias por los aportes amigo, se agradecen

***Kevinex*** · 16-11-2013, 07:03 PM

0

(16-11-2013, 06:59 PM)Sorss escribió: :o Está genial ésto, yo no sabía mucho de CSS3 no quise usarlo porque en algunos navegadores no funcionan, entonces tengo miedo de mi web se vea mal en los navegadores que no funcione, sería así?

Salu2.

Casí la mayoria lo soporte, en el comienzo te dice los navegadores que lo soporta. El explorador que mayormente da problemas en esto es el Internet Explorer.

***Kevinex*** · 16-11-2013, 07:09 PM

0

(16-11-2013, 07:06 PM)Sorss escribió: Ah, capaz lo utilice porque ya la gente no usa IE, usan los navegadores como Chrome, Firefox, Opera, Safari, etc.

Ahora la mayoria usa chrome y firefox así que si te serviria como mencionas Guiño

Wolves · 17-11-2013, 02:59 PM

0

(16-11-2013, 07:09 PM)Kevinex escribió:
(16-11-2013, 07:06 PM)Sorss escribió: Ah, capaz lo utilice porque ya la gente no usa IE, usan los navegadores como Chrome, Firefox, Opera, Safari, etc.

Ahora la mayoria usa chrome y firefox así que si te serviria como mencionas

Claro, Un 85 % usa chrome y Mozilla, Los demás se reparten en opera,safari,maxton, etc Guiño

Posibles temas similares…
Tema		Autor	Respuestas	Vistas	Último mensaje
	Menu horizontal con html5 y css3	torgar22	0	1,787	24-11-2014, 12:03 PM Último mensaje: torgar22