Usando keyframes con CSS3


Hola a todos,

Hacia tiempo que no escribía nada relacionado con CSS y hoy voy a retomar este tema con un post sobre las animaciones con CSS.

Cuando queremos crear animaciones en alguno de los elementos CSS de nuestra página web, usamos la regla @keyframes. Por medio de esta regla, crearemos la animación que después asociaremos a una clase de nuestro CSS y a través de las propiedades adecuadas haremos que se ejecute.

Un ejemplo de una regla @keyframes es la siguiente:

@keyframes move{
    0%   {top: 60%;}
    50%  {top: 30%;}
    100% {top: 0%;}
}

/* Chrome, Safari y Opera
@-webkit-keyframes move
{
    0%   {top: 60%;}
    50%  {top: 30%;}
    100% {top: 0%;}
}

El contenido del @keyframes es una línea de tiempo, en la que indicamos el valor que queremos que tengan las propiedades de nuestro elemento, en los instantes concretos de la misma. En el caso del ejemplo, estamos diciendo que queremos que en el inicio la propiedad top esté al 60%, en la mitad de la animación al 30% y al final al 0%. Además en este caso le hemos indicado que la animación se llame move.

Podemos usar las propiedades que queramos, consiguiendo así, por medio de CSS, sin necesidad de cargar javascript externos, tantas animaciones como seamos capaces de imaginar y plantear en base a la modificación de propiedades CSS.

Para usar esta animación en un elemento CSS lo haremos de la siguiente forma.

ul{float:left;width:100%;list-style:none;margin-bottom:3em;}
ul li{width:24%;margin-right:1%;height:15em;position:relative;float:left;border:1px solid #000;overflow:hidden;}
ul li .information{padding:0.5em;width:100%;height:100%;position:absolute;top:80%;background-color:rgba(0,0,0,0.3);}
    ul li:hover
    {
        cursor:pointer;
    }
    ul li:hover .information {
        /* Chrome, Safari, Opera */
        -webkit-animation-name: move;
        -webkit-animation-duration: 0.3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-fill-mode:forwards;
        /* Standard syntax */
        animation-name: move;
        animation-duration: 0.3s;
        animation-timing-function: linear;
        animation-iteration-count: 1;
        animation-fill-mode:forwards;

    }
  • Se utiliza la propiedad animation-name para indicar que animación queremos que se ejecute.
  • Con animation-duration, le indicamos la duración en segundos que queremos que tarde en llevarse a cabo la animación.
  • Con animation-iteration-count, le indicaremos las veces que queremos que se repita la animación.
  • La propiedad animation-timing-function establece la curva de velocidad de la animación.
  • Por último, a través de la propiedad animation-fill-mode, le indicaremos el estado en que queremos que quede el elemento después de la animación. Si volver al estado inicial o mantener el estado final después de la animación

Este es el código HTML, donde he usado el CSS que he definido previamente:

<ul>
     <li><div class="information">Ejemplo1</div></li>
     <li><div class="information"></div></li>
     <li><div class="information"></div></li>
     <li><div class="information"></div></li>
</ul>

Os recomiendo, para acabar, acceder a la definición de las propiedades de CSS relativas a las animaciones, para ver su funcionamiento y las opciones que nos ofrecen.

Regla @keyframes

Propiedad animation-name

Propiedad animation-duration

Propiedad animation-iteration-count

Propiedad animation-timing-function

Propiedad animation-fill-mode

Y esto es todo por hoy, espero que os útil y que probéis a hacer vuestras animaciones en CSS cuando lo necesitéis.

Saludos a todos

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s