Cómo hacer animaciones en CSS3

En este tutorial veremos el uso y los parámetros de animation en CSS3. Las animaciones de CSS3 son la herramienta perfecta para animar cualquier elemento, para crear un efecto puntual o para crear un movimiento contínuo de algún elemento (es decir, se pueden mover varios elementos de forma continuada pudiendo crear animaciones que antes sólo se veían en Flash o Javascript).

Las animaciones usan el parámetro animation en CSS para su uso estándar, por lo que es más correcto (por cuestiones de compatibilidad) también incluir el prefijo de cada navegador. La mayoría de los navegadores son compatibles, pero Internet Explorer no (en su versión 9).

Código :

/* Parámetro estándar */
animation:

/* Parámetros según navegador */
-webkit-animation:/* Chrome y Safari */
-moz-animation:/* Mozilla */

Cómo funcionan las animaciones en CSS3

Las animaciones de CSS3 funcionan distinto a otros parámetros de CSS. Debemos de establecer en el parámetro animation, además de la duración de la animación y el número de repeticiones que hace, un keyframe, que es el fragmento de código donde se escribe la secuencia que hará el elemento con esta animación (es decir, se especifica qué propiedades tendrá en cada momento, pudiendo modificar por ejemplo: el color, la altura, la posición...).

Keyframes en CSS3

Keyframes es una propiedad de CSS3 que va independiente de los selectores (que son el conjunto de palabras que usamos para seleccionar elemento de una página, como: "#CONTENEDOR div.cuerpo"), esta propiedad también usa los prefijos de ciertos navegadores por motivos de compatibilidad y también precede a un contenedor que se abre y cierra con {}, es decir, pondremos la propiedad keyframes, y dentro de las llaves su contenido.

Código :

/* Parámetro estándar */
@keyframes [Nombre del keyfremes] {}

/* Parámetros según navegador */
@-webkit-keyframes [Nombre del keyfremes] {}/* Chrome y Safari */
@-moz-keyframes [Nombre del keyfremes] {}/* Mozilla */

Código :

/* Ejemplo de un keyframes */
@keyframes Ejemplo {
0%{width:100px}
100%{width:200px}
}

Contenido del keyframe

Dentro del keyframes debemos de especificar los keyframes de forma individual, donde se especifica el porcentaje del tiempo de la animación en el que cierta propiedad cambia y posteriormente se especifican las propiedades que cambian escribiéndolas dentro de llaves. Si queremos que empiece la animación de determinada forma debemos añadir un keyframe con el porcentaje del tiempo de la animación en el que empieza (en el caso del inicio es el 0%), de esta forma podemos especificar que en cualquier momento de la animación cambien los parámetros (en el 30% de la animación o en el 50% por ejemplo), hasta máximo del 100%.

Código :

@keyframes Ejemplo {
0%{width:10%}
33%{width:20%}
66%{width:60%}
100%{width:10%}
}

Parámetros de animation

La propiedad animation puede contener distintos parámetros, como el nombre del keyframe que especifica su animación, su duración, el número de repeticiones y la función de tiempo.

Código :

animation: [Nombre del keyfremes] [Tiempo] [Número de repeticiones] [Función de Tiempo];

La propiedad animation tiene los siguientes parámetros:

• Nombre del keyframe: En este parámetro es donde establecemos el nombre del keyfreme, teniendo que ser igual al keyfreme que usemos para especificar la animación.
  
• Tiempo: Este parámetro establece el tiempo que tarda en hacerse la animación en segundos (su unidad es s), es decir si queremos que dure un segundo tenemos que poner "1s".
  
• Repeticiones: Con este parámetro podemos especificar con un número entero las veces que se repite la animación o hacer que se repita infinitamente estableciéndolo como "infinite".
  
• Función de tiempo: Este parámetro establece la curva de aceleración de la transición, es decir, si empieza más rápido y o más despacio o es un avance lineal, sin variar la aceleración.
  Este parámetro tiene varias funciones de tiempo preestablecida: lineal, ease, ease-in... Por defecto usa el ease, y es el más recomendado, consiste en un comienzo lento y una terminación lenta, acelerándose en la parte media.
  

Fuente: Xitrus | Ver completo con ejemplos de funcionamiento.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.