Animando elementos con CSS3

来源:互联网 时间:1970-01-01

Las animaciones fueron unas de las grandes incorporaciones de CSS3, con ellas damos vida a los elementos del documento en HTML cosa que antes solo era posible utilizando animaciones en flash o en ocasiones los famosos GIF. Las propiedades de animaciones de CSS3 nos van a permitir cambiar otras propiedades de CSS con movimiento y tiempo determinado.

En este articulo te mostrare las características generales y básicas de las animaciones en CSS3 y terminaremos con un ejemplo.

Animar con CSS

Para construir animaciones en CSS solo debemos de asignar la propiedad animation al elemento que deseamos animar, esta nos va a permitir establecer o configurar las otras propiedades que se requieren para establecer una animación completa, lo otro que debemos de establecer los pasos o secuencia que determinaran la acción animada, esto lo hacemos por medio de los @keyframes .

Establecemos la animación de un elemento con las siguientes propiedades:

animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state

Al momento de aplicar una animación a un elemento lo podemos hacer de dos formas.

1. Aplicarla animación de con propiedades animation por separadas

CSS

elemento { animation-name: myanimacion; animation-duration: 10s; animation-timing-function: ease-out; animation-delay: 3s; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: forwards; animation-play-state: running;} elemento {animation-name:myanimacion;animation-duration:10s;animation-timing-function:ease-out;animation-delay:3s;animation-iteration-count:infinite;animation-direction:alternate;animation-fill-mode:forwards;animation-play-state:running;} 2. Aplicar la animaciónutilizando la versión abreviada “Shorthand” de animation css

CSS

elemento { animation: animation-name duration timing-function delay iteration-count direction fill-mode play-state;} elemento { animation:animation-namedurationtiming-functiondelayiteration-countdirectionfill-modeplay-state;}

Ahora, para hacer una animación debemos de saber como funciona cada una de las propiedades que podemos involucrar en una acción animada. Veamos lo que puede hacer cada una.

Propiedad Descripción • animation-name Con esta propiedad especificamos el nombre de la animación. • animation-duration con esta propiedad especificamos la duración que tomara la animación en reproducirse. El tiempo lo podemos especificar en segundo o mili-segundos. El valor por defecto es 0 . • animation-timing-function con esta propiedad definimos la progresión, curva de velocidad o ritmo de la animación. Los valores que podemos utilizar son linear | ease | ease-in | ease-out | steps | stept-end | step-start y el valor cubic-bezier(x,x,x,x) que es totalmente configurable. El valor por defecto es ease . • animation-delay Con esta propiedad definimos el tiempo que tardara la animación en iniciar. Estos valores los especificamos en segundo o mili-segundos. E l valor por defecto es 0 , por lo que la animación no esperara ningún tiempo para reproducirse. • animation-iteration-count con esta propiedad definimos el numero de veces que se ejecutara la animación.Podemos definir un numero de veces o el valor infinito que se ejecutara todo el tiempo. El valor por defecto es 1 . • animation-direction Con esta propiedad especificamos la dirección de ejecución de la animación, esta puede ser normal que es el valor por defecto , puede ser en reversa con reverse, alternate o alternate-reverse. • animation-fill-mode con los valores de esta propiedad especificamos los estilos que se aplicaran antes de ejecutarse la animación o después de ejecutarse la misma. Lo hacemos con forwards, backwards o both para seleccionar ambos estados. El valor por defecto es none . • animation-play-state Esta propiedad especifica si la animación debe de estar pausada o debe de reproducirse. Los valores son: paused | running siendo running el valore por defecto . Configuración de las secuencias para animar con los @keyframes

Después de definir las características de la animación vamos a tener que configurar o definir el aspecto de la misma, definir los pasos que debe de recorrer el elemento para dar la sensación de movimiento. esto lo hacemos utilizando la regla @keyframes donde cada fotograma define un momento puntual durante la secuencia de la animación.

podemos declarar los @keyframes de 2 formas.

declarando los pasos inicial y final de la animación

CSS

@keyframes nombre-animacion { from { /* Estilos a aplicar, comienzo*/ } to { /* Estilos a aplicar, final */ }} @keyframes nombre-animacion { from { /* Estilos a aplicar, comienzo*/ } to { /* Estilos a aplicar, final */ }}

También podemos especificar los puntos o fotogramas clave de la animación por medio de porcentajes “%” esto nos permite tener un mayor control sobre la animación.

CSS

@keyframes nombre-animacion { 0% { /* estilos a aplicar en este punto */ } 25% { /* estilos a aplicar en este punto */ } 50% { /* estilos a aplicar en este punto */ } 100% { /* estilos a aplicar en este punto */ }} @keyframes nombre-animacion {0% {/* estilos a aplicar en este punto */}25% {/* estilos a aplicar en este punto */}50% {/* estilos a aplicar en este punto */}100% {/* estilos a aplicar en este punto */}}

Lo que va a pasar es que en cada uno de los pasos o puntos claves definidos se van a aplicar las propiedades css aplicados en cada frame o punto, podemos cambiar posiciones, dimensiones, colores y demás propiedades css, en fin cambios que se requieren para hacer una acción animada.

Así que vamos a colocar en práctica la teoría que acabamos de ver en el siguiente ejercicio.

See the Pen Animacion basica – CSS3 by frontend (@tutosytips) onCodePen

Lo que hicimos anteriormente fue hacer dos animaciones, una a el elemento bola y otra al background del elemento body. en la bola creamos 3 puntos claves de la animación, al 0% al 50% y al 100% y en cada punto cambiamos la posición de la bola por medio de la propiedad left.

También podemos utilizar los pasos “steps()” para poder controlar los pasos o los frames que se mostraran en el marco de la secuencia animada y en el tiempo determinado. Por ejemplo: con steps(20) establecidos en la animación nos aseguramos que solo 20 fotogramas se ejecutaran en la secuencia animada y tiempo asignado. Veamos un ejemplo utilizando los pasos en conjunto a una sprite image de secuencia.

See the Pen animación Sprites con CSS3 by frontend (@tutosytips) onCodePen

En la animación anterior utilizamos los pasos, en total 8, pues es el numero de frames de la acción animada, los frames se ejecutaran en 1 segundo y será una animación infinita. En los Keyframes hacemos un fromto es decir desde el punto 0 con una posición de background 0 hasta una posición negativa de -798px que es el ancho de la imagen.

En el siguiente vídeo del cursoAprende CSS3 desde 0 puedes ver un poco más los conceptos de las propiedades para animar con CSS.

Soporte en navegadores paraCSS Animation.

CSS Animation tiene total soporte en los navegadores modernos, pero es una buena práctica utilizar el prefijo –webkit- para dar soporte a los navegadores chrome , safari , android browser de versiones anteriores. Para ver el soporte actual puedes visitar: http://caniuse.com/#search=animation .

Y para más información acerca las animaciones de CSS puedes visitar:

http://www.w3.org /

https://developer.mozilla.org/


相关阅读:
Top