Sintaxis de Animaciones con Keyframe – Webkit – @webkit-keyframes

A continuación, una sencilla demostración de lo que se puede hacer con @webkit-keyframes.  @webkit-keyframes es un identificador de propiedades de una animación para Webkit. Haremos un parapadeo de un objeto haciéndolo transparente y volviendo a hacerlo opaco.

Las claves:

<html>
<head>
<style type="text/css"> @-webkit-keyframes Parpadeo {
  /* Marcamos las propiedades de nuestra animación Parpadeo en el 
 0% del tiempode la animación, es decir, en el segundo 0.*/
    0% { opacity: 0.1; }

 /*Marcamos las propiedades de nuestra animación Parpadeo en el 
100% del tiempo de la animación, es decir, qué propiedades queremos
 que tenga cuando se haya agotado el tiempo que luego fijaremos 
 como 1s infinite*/

    100% { opacity: 1; }
}
/* El identificador de objeto logo apunta a un objeto canvas, con 
 nuestro logotipo dibujado a mano sobre lienzo HTML5 */ 
#miCapa {
/* A la propiedad webkit-animation le indicamos que tenemos
 una coreografía planeada llamada Parpadeo, que dura un
 segundo, y que después de ese tiempo vuelve a empezar */
    -webkit-animation: Parpadeo  1s infinite ;

/* Esta opción es fundamental si queremos que la animación 
no  empiece de cero, ya queremos notaremos un cambio
 brusco en la  opacidad (la propiedad con laque estamos jugando).
 Lo que  se consigue es que funcione como un péndulo de reloj,
 cuando  llega al final del recorrido, hace el recorrido en sentido 
inverso. Si quieres comprobarlo, pueba a comentar o borrar
 la línea -webkit-animation-direction: alternate; */

    -webkit-animation-direction: alternate;
    width:400px;
    height:150px;
    position:absolute;
    left:40%;
    right:60%;
}
</style>
<head/>
<body>
<div id="miCapa"> Webkit-KeyFrames </div>
</body>
</html>
Anuncios

Acerca de mitch

Quiero compartir mis experiencias y mis humildes conocimientos
Esta entrada fue publicada en Otros. Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s