Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Animacion en CSS3

Realizar animaciones en la página es muy fácil con CSS3

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

Animacion CSS3 (I)

Mi primera animación

Sobre ésta página

última modificación: 13-07-2018.

Visitas este mes: 35

Visitas el mes pasado: 157

Cómo crear animaciones

Una animación es cualquier elemento o grupo de elementos que se mueve o cambia de aspecto progresivamente.

Hasta ahora las animaciones en la web debíamos hacerlas con javascript o con algún programa externo como "flash" o "java".

El proceso para crear una animación puede ser más o menos complicado según el programa que usemos y el tipo de animación. En una animación un elemento cambia de estado, bien sea cambiando de sitio, de tamaño, de color, de forma, etc. Este cambio se realiza de manera gradual, de forma que vemos como el elemento va cambiando, la velocidad de cambio debe ser tal que el ojo la perciba como un movimiento continuo (superior a 10 o 12 cambios por segundo).

Las primeras animaciones se hacían indicando uno a uno cada cambio de estado o posición del elemento, e incluso teniendo que redefinir el elemento en cada punto de ese cambio. Cada uno de los cambios que tiene el elemento desde su estado inicial al final es un fotograma. En lenguajes como javascript debemos definir fotograma a fotograma toda la transición del elemento, aunque para ello nos ayudamos de elementos como los bucles que repiten automáticamente el proceso.

Las animacones con CSS3 son bastante más sencillas, ya que utilizan un método usado en programas como "flash", el de los fotogramas clave.

Fotograma clave

Los fotogramas clave son los que marcan el estado del elemento animado al principio, al final, o cuando éste tenga que variar de forma no previsible.

En un ejemplo sencillo, si queremos que un elemento se mueva de izquierda a derecha, posicionamos en el primer fotograma el elemento en un punto a la izquierda, y en el segundo fotograma lo posicionamos a la derecha. le indicamos luego el tiempo que tiene que tardar de ir de uno a otro; si queremos que después el elemento siga moviéndose hacia abajo, lo posicionaremos en un tercer fotograma clave, situado en un punto debajo del segundo. El elemento recorrerá en línea recta del primero al segundo fotograma y seguidamente del segundo al tercero. Todos los estados intermedios del elemento entre los fotogramas 1, 2 y 3 se calculan automáticamente. Ahora veamos cómo se hace todo esto con CSS3.

La regla @keyframes

En CSS los fotogramas clave se crean mediante la regla @keyframes la cual tiene la siguiente estructura:

@keyframes <nombre> {
      0%{<propiedad: valor>+}
      100%{<propiedad: valor>+}
      }  

En el selector escribimos la palabra clave @keyframes seguido de un nombre que nosotros le daremos a la animación. Este nombre es necesario para poder dar después otras propiedades de animación, como puede ser el tiempo.

Dentro de la declaración (espacio entre llaves) pondremos los diversos fotogramas clave. los cuales son unas sub-reglas CSS compuestas de:

• Selector: Los selectores indican el punto en el que se coloca el fotograma clave. Se indican en tantos por ciento. El primero debe ser siempre el 0% que indica el principio de la animación, y el último el 100% e indica el final. Entre medio se pueden colocar más fotogramas clave, indicando siempre en tanto por ciento el punto en el que estará el fotograma. Cuando hay sólo dos fotogramas pueden usarse también las palabras clave from para el primero y to para el último.
• Declaración: Dentro de las llaves de los fotogramas pondremos las propiedades CSS del elemento en el momento que se visualice el fotograma. Por ejemplo, en el primero marcamos el color, posición y tamaño inicial; en el último marcamos color, posición y tamañó final. Las propiedades, siempre que puedan, (propiedades que contienen números -medida- color - etc) cambiarán gradualmente del primero al último durante el tiempo que dure la animación.

NAVEGADORES: Los principales navegadores admiten en sus últimas versiones La regla @keyframes, Sin embargo hasta hace poco tiempo Firefox utilizaba la forma experimental, con el prefijo -moz- (@-moz-keyframes). Ultimamente Firefox ha adoptado la forma estándar. Safari y Chrome siguen utilizando la forma experimental con el prefijo -webkit- (@-webkit-keyframes). Opera también ha incorporado recientemente la forma estándar. Internet Explorer incorpora también la forma estándar a partir de la versión 10.

Propiedades de animación.

Aunque las veremos en la próxima página más detalladamente, vamos a ver aquí las propiedades necesarias para crear una animación simple. En primer lugar debemos indicar qué elemento de la página es el que tiene la animación. Esto se hace mediante la propiedad:

#anim { animation-name: <nombre> }

El "nombre" que pongamos como valor debe ser el mismo que lleva la regla @keyframe; de esa manera quedará asociada al elemento que marca el selector.

En segundo lugar debemos marcar el tiempo que dura la animación. Este lo indicamos mediante la propiedad:

animation-duration: <tiempo>;

El "tiempo" lo expresaremos en segundos (ej.: 10s) o en milisegundos (ej.: 4000ms) indicandolo en número seguido de la/s letra/s "s" para segundos o "ms" para milisegundos.

Aunque con esto ya podemos hacer una animación muy sencilla, la animación que vamos a hacer como ejemplo tendrá otras dos propiedades, la primera de ellas hará que la animación se repita indefinidamente:

animation-iteration-count: infinite;

El valor "infinite" hace que la animación se repita indefinidamente. Además de este valor, a esta propiedad se le puede dar como valor un número entero positivo, que será el número de veces que se repita la animación.

Por último queremos que la animación, una vez llegue al final, recorra el camino inverso, viéndose otra vez todo al revés. Para ello utilizaremos la propiedad:

animation-direction: alternate;

el valor "alternate" hace que la animación al llegar al final se repita en sentido inverso. También puede tener el valor normal que hace que la animación vaya sólo en una dirección.

NAVEGADORES: Al igual que la regla @keyframes las propiedades de animación han sido incorporadas recientemente en su forma estándar en todos los navegadores excepto Safari y Crhome, que siguen utilizando la forma experimental. Internet Explorer adopta la forma estándar a partir de su versión 10.

Ejemplo de animación:

Con lo que hemos visto hasta ahora ya podemos hacer un ejemplo de animación sencillo. El ejemplo consistirá en un cuadrado que se mueve horizontalmente mientras cambia de color.

veamos primero la regla @keyframes. Para verla en todos los navegadores la pondremos primero en la versión estándar, y luego en la forma para Safari y Chrome:

/*Regla keyframes en forma estándar*/
@keyframes mianim { 
   from { left: 50px; background-color:red } /*Fotograma inicio*/
   to { left: 600px; background-color:blue } /*Fotograma final*/
}
/*Regla keyframes para Chrome y Safari*/
@-webkit-keyframes mianim { 
   from { left: 50px; background-color:red } /*Fotograma inicio*/
   to { left: 600px; background-color:blue } /*Fotograma final*/
}

En los fotogramas clave marcamos en el de inicio la posición de partida (left: 50px) así como el color que tendrá cuando esté en esa posición (background-color:red); y en el fotograma final la posición y color que tendrá cuando llegue al final left: 600px; background-color:blue). Hemos usado aquí las palabras clave from para el inicio y to para el final, que equivalen al 0% y 100% respectivamente.

El elemento animado debe tener un posicionamiento, que puede ser relativo o absoluto. De esta forma podemos usar las propiedades de posicion (left, right, top, bottom) para cambiarlo de sitio y moverlo por la página. Además le daremos las propiedades de anchura, altura y borde para convertirlo en un cuadrado. Escribimos esto en el archivo CSS:

/*posicionamiento, anchura, altura y  borde elemento.*/
#anim { position: relative ; 
        width: 100px; height: 100px; 
        border: 1px solid black; }

Ahora pondremos las propiedades de animación necesarias para que la animación funcione, que son las indicadas anteriormente. Al igual que con la regla @keyframes debemos repetirlas en su forma experimental para que puedan verse en Chrome y Safari

/*propiedades de animación*/

#anim { /*Forma estándar*/
        animation-name: mianim; /*referencia nombre*/
        animation-duration: 5s; /*tiempo*/
        animation-iteration-count: infinite; /*repeticion indefinida*/
        animation-direction: alternate; /*repetir al revés*/
				
        /*Para Chrome y Safari*/
        -webkit-animation-name: mianim; /*referencia nombre*/
        -webkit-animation-duration: 5s; /*tiempo*/
        -webkit-animation-iteration-count: infinite; /*repeticion indefinida*/
        -webkit-animation-direction: alternate; /*repetir al revés*/
      }
			

Guardamos el archivo CSS (mianim.css) y creamos el archivo HTML, el cual será así de sencillo:

<!DOCTYPE HTML>
<html>
<head>
  <title>Mi Primera Animación</title>
  <link rel="stylesheet" type="text/css" href="mianim.css" />
</head>
<body>
  <h1>MI primera animación</h1>
  <div id="anim"></div>
</body>
</html>

El ejemplo anterior quedará como en el siguiente enlace:

MI primera animación

En la siguiente página veremos más detenidamente las propiedades de animación

Propiedades de animación.

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com