Las animaciones son efectos como las transiciones pero mejorados en su funcionalidad, en el sentido que existe un control superior sobre lo que se puede realizar, debido a la disponibilidad de más opciones para hacer los cambios de un estilo hacia otro.
Propiedades de las animaciones
Como habíamos dicho anteriormente las animaciones son transiciones mejoradas debido a la cantidad de opciones y propiedades que nos permiten tener un mayor control sobre las mismas, vamos a repasar cada una de ellas:
Ahora que ya conocemos las propiedades disponibles veamos un código de ejemplo para analizarlo:
En este ejemplo vemos que en el momento de hacer :hover sobre el elemento tendremos un retraso de 100ms luego la animación tendrá 500ms para realizarse y se repetirá una cantidad de veces infinita.
Luego vemos que con el nombre que le dimos a la aplicación utilizaremos la propiedad @keyframes que es donde le diremos que elementos son los que se van a animar.
Veamos cómo debería lucir en nuestro navegador:
![html5_animaciones.jpg]()
Como vemos hay un cambio en el fondo del elemento luego el color de la letra y el tamaño de la fuente, al momento de finalizar la animación regresa al estado inicial y se repite nuevamente todo este proceso, esto le dota de un movimiento que no existe con el uso de las transiciones.
Con esto demostramos también la importancia del nombre de la animación ya que este funciona como el identificador para poder asignarle un @keyframes.
Con esto finalizamos el tutorial y con ello ya estamos en capacidad de realizar animaciones básicas, para de esta forma brindarle más movimiento a nuestros documentos HTML.
Propiedades de las animaciones
Como habíamos dicho anteriormente las animaciones son transiciones mejoradas debido a la cantidad de opciones y propiedades que nos permiten tener un mayor control sobre las mismas, vamos a repasar cada una de ellas:
- animation-delay: Aplica un tiempo específico para poder dar inicio a la animación una vez se active.
- animation-direction: Especifica si la animación debe reproducirse hacia atrás o en ciclos alternados.
- animation-duration: Indica el rango de tiempo en el que debe reproducirse la animación.
- animation-iteration-count: Indica la cantidad de veces que la animación debe repetirse, pudiendo inclusive colocar el valor infinite para repeticiones infinitas de la misma.
- animation-name: Especifica el nombre de la animación.
- animation-play-state: Permite que la animación pueda ser puesta en pausa y luego continuar reproduciondose.
- animation-timing-func: Especifica como los valores intermedios deben ser tratados en la animación
- animation: Es el atajo con el cual podremos incorporar todas las propiedades de la animación en una sola declaración CSS y tiene la siguiente estructura:
Ahora que ya conocemos las propiedades disponibles veamos un código de ejemplo para analizarlo:
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
p {
padding: 5px;
border: medium double black;
background-color: lightgray;
font-family: sans-serif;
}
#banana {
font-size: large;
border: medium solid black;
}
#banana:hover {
-webkit-animation-delay: 100ms;
-webkit-animation-duration: 500ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: 'GrowShrink';
}
@-webkit-keyframes GrowShrink {
to {
font-size: x-large;
border: medium solid white;
background-color: green;
color: white;
padding: 4px;
}
}
</style>
</head>
<body>
<p>
There are lots of different kinds of fruit - there are over 500
varieties of <span id="banana">banana</span> alone. By the time we add the
countless types of apples, oranges, and other
well-known fruit, we are faced with thousands of choices.
</p>
</body>
</html>
En este ejemplo vemos que en el momento de hacer :hover sobre el elemento tendremos un retraso de 100ms luego la animación tendrá 500ms para realizarse y se repetirá una cantidad de veces infinita.
Luego vemos que con el nombre que le dimos a la aplicación utilizaremos la propiedad @keyframes que es donde le diremos que elementos son los que se van a animar.
Veamos cómo debería lucir en nuestro navegador:
Como vemos hay un cambio en el fondo del elemento luego el color de la letra y el tamaño de la fuente, al momento de finalizar la animación regresa al estado inicial y se repite nuevamente todo este proceso, esto le dota de un movimiento que no existe con el uso de las transiciones.
Con esto demostramos también la importancia del nombre de la animación ya que este funciona como el identificador para poder asignarle un @keyframes.
Con esto finalizamos el tutorial y con ello ya estamos en capacidad de realizar animaciones básicas, para de esta forma brindarle más movimiento a nuestros documentos HTML.
