Simple animación con CSS3

Ver el tema anterior Ver el tema siguiente Ir abajo

Simple animación con CSS3

Mensaje por [SH] SrHell el Sáb Jun 07, 2014 9:40 pm

CSS

Código:

<style type="text/css">
   .primera{
      position: absolute;
      animation:primeras infinite;
      animation-duration:8s;
      -moz-animation:primeras infinite;
      -moz-animation-duration:8s;
      -o-animation:primeras infinite;
      -o-animation-duration:8s;
      -webkit-animation:primeras infinite;
      -webkit-animation-duration:8s;
}
@-webkit-keyframes primeras
   {
   0% {opacity: 1;}
   50% {opacity: 0;}
   100% {opacity: 1;}
   }

@-moz-keyframes primeras
   {
   0% {opacity: 1;}
   50% {opacity: 0;}
   100% {opacity: 1;}
   }

@-o-keyframes primeras
   {
   0% {opacity: 1;}
   50% {opacity: 0;}
   100% {opacity: 1;}
   }

@keyframes primeras
   {
   0% {opacity: 1;}
   50% {opacity: 0;}
   100% {opacity: 1;}
   }
   .segunda{
      position: absolute;
}
</style>

Donde cambiar el tiempo para la animación: animation-duration:8s;
¿Que significa -moz-, -o- y -webkit-? -moz- es para el navegado Mozilla, -o- es para Opera y -webkit- es para Chrome y Safari, el que no lleva nada puede que funcione en cualquier explorador. Recuerda que si tu código no funciona en todos los exploradores es inútil.

Ojo Internet Explorer no funciona bien con animaciones en CSS3

HTML

Código:

<div>
   <img title="Unete" src="http://puu.sh/562on" class="segunda">
   <img title="Unete" src="http://puu.sh/54F9k" class="primera">
</div>

Lo pueden probar en JsFiddle

¿Tuviste problemas al usarlo en tu página web?

Recuerda que este código es CSS3 y no en todos los servidores esta permitido usarlo, por ejemplo en foroactivo tienes que ponerlo dentro de <style> </style> para que funcione y no en la hoja de estilos que trae por predeterminado.

¿Quieres que sean tres o más?

El hecho de que yo haya utilizado dos imágenes es por que estas animaciones sobrecargan las páginas... A nadie le gusta una página que sobrecargue la PC.

Sí deseas hacerlo debes tener un poco mas de conocimiento en CSS3 y preguntármelo por correo (igual si tienen problemas para usarlo pueden preguntar).

Sí te gusto y lo usaras en tu página deja el link en comentarios para que pueda verla :'D o pueden unirse a SyncRajo...

SrHell escribió:sr.hell7@gmail.com
avatar
[SH] SrHell
Admin

Mensajes : 26
Fecha de inscripción : 03/06/2014
Edad : 23

Ver perfil de usuario

Volver arriba Ir abajo

Re: Simple animación con CSS3

Mensaje por DarkAngel el Vie Jul 18, 2014 2:00 pm

Qué interesante está esa página para probar el CSS... me será muy útil esta información. Gracias.
avatar
DarkAngel
Admin

Mensajes : 11
Fecha de inscripción : 03/06/2014

Ver perfil de usuario

Volver arriba Ir abajo

Re: Simple animación con CSS3

Mensaje por [FG] Zero el Sáb Jul 26, 2014 9:16 pm

Vea pues. Voy a probarlo y si tengo dudas por aquí volveré. xD
Gracias.
avatar
[FG] Zero

Mensajes : 14
Fecha de inscripción : 03/06/2014
Edad : 24
Localización : En mi casa.

Ver perfil de usuario

Volver arriba Ir abajo

Re: Simple animación con CSS3

Mensaje por Contenido patrocinado


Contenido patrocinado


Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba


 
Permisos de este foro:
No puedes responder a temas en este foro.
Crear foro | © phpBB | Foro gratis de asistencia | Contactar | Denunciar un abuso | foro gratis