Banner con Keyframes CSS3
En esta Entrada se muestra como hacer un banner sumanente sencillo para nuestra pagina web, solo con HTML5 y CSS3, especificamente con la regla "@keyframes", la cual nos permite controlar paso a paso la secuencia de animación de un objeto en un tiempo determinado. Para utilizar los keyframes, se crea una regla de @keyframes con un nombre que es utilizada por la propiedad 'animation' para que coincida con una animación de keyframe, en el caso del nuestro ejemplo las reglas la nombraremos "banner1 y banner11", para controlar dos animaciones simultaneamente, algunas de las propiedades de las keyframes son los que se muestran en la siguiente tabla.
| animation-name | Especifica el nombre del fotograma clave que desea enlazar con el selector |
| animation-duration | Especifica cuántos segundos o milisegundos una animación tarda en completar |
| animation-timing-function | Especifica la curva de velocidad de la animación |
| animation-delay | Especifica un retraso antes de que comenzará la animación |
| animation-iteration-count | Especifica cuántas veces se debe jugar una animación |
| animation-direction | Especifica si la animación se reproduzca a la inversa en ciclos alternos |
Los Valores que pueden tomar estas propiedades son:
- animation-name : nombreDelMovimiento;
- animation-duration : ns;
- animation-timing-function : linear | ease | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
- animation-delay : ns;
- animation-iteration-count : n | infinite;
- animation-direction : normal | reverse | alternate | alternate-reverse;
ns, numero de segundos
n, cualquier numero entero
Capturas del Banner
