Como colocar efectos con animación ¿?

Al diseñar, principalmente, le damos distintos detalles a cada elemento que tenemos en nuestro sitio para darle un estilo único, original & llamativo.
Tanto a títulos, como a imágenes, header, blockquotes, comentarios, etc. le damos a cada rincón un tiempo determinado en agregarle & combinar distintos efectos que podamos agregarle.
Entre efectos como colores de fondo, diversos tipos de bordes, modificación en la forma, sombra, brillo, posición, etc. hoy veremos algo nuevo, aprenderemos como lograr colocar todo esto en movimiento. Crearemos animación.

Aprenderemos una animación básica. Simple & sencilla, veremos como lograr que nuestro efecto cambie infinitas veces. En este caso, el efecto serán los colores, tanto de fondo como en letras.

Animación en el color de fondo.

Para comenzar, debemos elegir el elemento que queremos colocarle un "fondo animado", yo en este tutorial, me basare en el EJEMPLO NRO1 que seria colocarle fondo animado a las imágenes.
Una vez que ya tenemos el elemento al cual editaremos, comencemos por crear la animación:
1ER PASO: Debemos colocarle un nombre especifico a la  animacion, en este ejemplo utilizare la palabra "background" ya que animaremos el color de fondo & la colocaremos en el siguiente code:

@-webkit-keyframes background{
0%   {background:#6FB9AC;} /* COLORES DEL FONDO */
25% {background:#D3E8A3;}
50% {background:#FEFABD;}
75% {background:#F8828E;}
100% {background:#6FB9AC;}
}

Aquí, debemos editar los colores de fondo.
Los porcentajes son las cantidad de veces que cambiara de colores nuestro efecto. Esto no quiere decir que sea "la cantidad de colores" que tendrá nuestro efecto, ya que el color de inicio & el del final (0% & 100% respectivamente) deben ser iguales, para que no provoque un cambio muy rápido, ya que existe una pausa entre que termina la animación & comienza otra vez.

2DO PASO: Una vez que ya tenemos el código anterior con el nombre de la animación & con los colores ya editados. Debemos agregar al código css de lo que queremos editar (que lo explicare mas detalladamente en el 3er paso), la siguiente linea:

-webkit-animation: background 7s infinite;

Explicare detalladamente lo que esto contiene,

• background: seria en este el caso "nombre" que le asignamos a la animación, ten en cuenta que debes colocarle el mismo que utilizaste en el primer código que te enseño en esta pagina.
• 7s: Son los segundos que tarda la animación es transcurrir. Entre mas alto, mas lento sera & por ende entre mas disminuyas el nro mas lento ira.
• infinite: Esto indicara que la animación es infinita. Continuamente termina & vuelve a comenzar; de querer que solo el efecto se produzca una sola vez, simplemente se elimina.

3ER PASO: Bien, hasta acá ya tenemos los códigos necesarios preparados para crear nuestro efecto deseado. Ahora volvamos a una parte del 2DO PASO, la cual es el de colocar la linea dada en el código css de "lo que queramos editar"; por ejemplo, al comienzo del tutorial, decidimos editar en este caso el fondo de las imágenes, así que buscaremos el codigo css para editar imágenes:

En cualquier tutorial de como colocarle algún efecto especifico a una imagen puedes encontrar el code css para editar las imágenes en tu blog. Por ejemplo : Imagenes con sombra / Efectos en imágenes "Hover"

img {
background:#6FB9AC;
padding:10px;
border: 1px solid #fff;
box-shadow: 3px 3px 3px #ddd;
}

Una vez que tenemos esto, dentro colocaremos, como ya dijimos anteriormente , el code dado en el 2DO PASO. Lo que nos quedaría de esta forma:

img {
background:#6FB9AC;
padding:10px;
border: 1px solid #fff;
box-shadow: 3px 3px 3px #ddd;
-webkit-animation: background 7s infinite;}

& con esto, ya tienes terminada tu animación.
ATENCIÓN: ten en cuenta que estamos editando desde el codigo css de los elementos de nuestro blgo, así que cada codigo {excepto diga lo contrario} debe ir situado, ARRIBA de:

• En plantillas actualizadas, de la etiqueta: ]]></b:skin>
• En plantillas clásicas, de la etiqueta: </style>

Animación en el color del borde.

Los pasos aquí son los mismos, pero es donde viene el momento de enseñarles como editar la animación. Sabemos que en el 1er caso, el codigo principal de animación, era el siguiente:

@-webkit-keyframes background
{
0%   {background:#6FB9AC;} /* COLORES DEL FONDO */
25% {background:#D3E8A3;}
50% {background:#FEFABD;}
75% {background:#F8828E;}
100% {background:#6FB9AC;}
}

Ahora bien, donde allí editamos los distintos "backgrounds:" aquí colocaremos el css para editar los diversos "border:"; El codigo nos quedaría de esta forma, donde también para diferenciar editaremos el nombre de la animación por border:

@-webkit-keyframes border{
0%   {border: 3px solid #6FB9AC;}
25% {border: 3px solid #D3E8A3;}
50% {border: 3px solid #FEFABD;}
75% {border: 3px solid #F8828E;}
100% {border: 3px solid #6FB9AC;}
}

Como se puede observar, solo sustituimos cada background por el nuevo code border.
Pero esto no es lo único que se puede editar. Podemos realizar ambas ediciones juntas! Cambiemos el nombre de esta nueva animación, por colores:

@-webkit-keyframes colores{
0%   {background:#FEFABD; border: 3px solid #6FB9AC;}
25% {background:#F8828E;  border: 3px solid #D3E8A3;}
50% {background:#6FB9AC; border: 3px solid #FEFABD;}
75% {background:#D3E8A3; border: 3px solid #F8828E;}
100% {background:#FEFABD; border: 3px solid #6FB9AC;}
}

& así, podemos intercalar efectos & sumar otros a la edición. Igual tener en cuenta, que siempre & cuando cambias el nombre a la animación, debes cambiar el nombre a la linea que se coloca en el css del elemento a editar. {para cualquier duda, vuelve a leer el 2DO PASO}

Como colocar este efecto en los comentarios ¿?

Tanto para colocar el efecto animado en los comentarios, como en alguna otra parte del blog, hay que ver el css de aquello que vamos a editar.

Primero tengamos la animación que usaremos que sera la primera que vimos en el tutorial, que ahora la la llamaremos "icon":

@-webkit-keyframes icon{
0%   {background:#6FB9AC;} /* COLORES DEL FONDO */
25% {background:#D3E8A3;}
50% {background:#FEFABD;}
75% {background:#F8828E;}
100% {background:#6FB9AC;}
}

Ahora, en este caso vamos al tutorial "Edita los comentarios de tu blog" & lo colocamos en nuestro blog.
Una vez ya tenemos esto, buscamos en el primero codigo que colocamos del tutorial de comentarios, lo que queremos animar, ejemplo:
ICONS DE LOS COMENTARIOS: el code de los comentarios donde podemos editar el fondo de los avatar de cada comentarista lo ubicas debajo de:

/* Contorno de los avatares */

Donde veras algo similar a lo siguiente: (digo similar, debido a que quizá lo tengas ya modificado a tu gusto para el diseño de tu blog).

.avatar-image-container{
background:#9ad2cb;
padding:5px;
border-radius:50% 50% 0% 50%;
}

Dentro de esto colocaremos, como vimos en un principio, la linea que lograra la animación en dicho elemento:

-webkit-animation: icon 7s infinite;

RECUERDA siempre colocar el mismo nombre que le pusimos a la animación en un comienzo.
Nos quedara de esta forma:

.avatar-image-container{
background:#9ad2cb;
padding:5px;
border-radius:50% 50% 0% 50%;
-webkit-animation: icon 7s infinite;}

& así tenemos listos un efecto animado en el color del fondo de nuestros icons en los comentarios.
Puedes realizar este procedimiento en plantillas clásicas, teniendo en cuenta el codigo del tutorial de comentarios para estas.

En donde mas puedo aplicar este tutorial ¿?

De esta misma forma puedes realizar el efecto en bordes, textos, fondos de los títulos, en el hover de los links! & en muchos otros elementos que puedes crear.
Ademas, no te limites a utilizar colores, puedes utilizar, fondos con imágenes & colocar distintos motivos, como de estrellas, & colocar en cada porcentaje, uno de un color diferente creando un mágico movimiento en el blog completo!
Juega también con la rapidez del cambio &/o con el efecto de escala, que puedes verlo en este tutorial: Ampliación & Reduccion.

Pasa el cursor por la imagen!¡

{icon by stickytoffee.bs.com}

~