CSS avanzado: 12 trucos

Las animaciones y cómo sustituir a Flash dentro de CSS

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Ahora que no tenemos la posibilidad de utilizar flash, os mostraré pequeños trucos con los que poder realizar animaciones mediante CSS para nuestros elementos de HTML. Movimientos que nos ayudaran a poder crear piezas únicas sin perder nada de diseño.

Transcripción

En este vídeo vamos a aprender cómo utilizar las animaciones en su forma más sencilla. Para comenzar, debemos saber que las propiedades de 'animation' son las siguientes: tenemos el 'name', para especificar qué animación queremos aplicar; el 'duration', para decirle durante cuánto tiempo va a estar ejecutándose esa animación; el 'timing function', que puede ser 'linear', 'ease', ease-in', 'ease-out', etcétera, que lo que hacen referencia es a la modalidad en la que se va a ejecutar esa animación; 'animation-delay' es para decirle cuántos segundos tiene que esperar hasta que arranque la animación; el 'iteration-count' lo que va a decirle es, bien de forma numérica, 1, 2, de 1 a N, o de forma infinita, cuántas veces va a repetirse esa animación; y luego con 'animation direction' lo que le vamos a especificar es qué tipo de dirección va a llevar nuestra animación. Teniendo estos parámetros especificados, vamos a pasar a ver cómo se genera una animación. La manera de definirla es con "key frames" y el nombre de nuestra animación. Si os fijáis, este nombre es el mismo que nos aparece aquí. Lo voy a llamar de otra manera, para que no os hagáis un lío con los 'header'. Animación- preview. La sintaxis del "key frame" es: from... to... o bien desde el 'frame' 0 al 'frame' 100 %. Y lo que vamos a hacer es especificar las propiedades de CSS que queremos modificar de nuestro elemento al que se lo estamos aplicando. En este caso, lo que yo quiero es modificar propiedades de mi 'header'. Si yo, para que veáis cómo funciona, le digo que en un primer comienzo mi 'header', su 'width' es auto y cuando termine la animación, quiero que sea de 1500 píxeles, si salvo y me voy a mi navegador y actualizo, va a esperar dos segundos hasta que empiece la animación, y durante esos segundos, cuatro en este caso, va a hacer que sea más grande. ¿Habéis visto como me sale "scroll" porque le estoy diciendo que el 'width' tiene que ser de 1500? Ahí está, y dura cinco segundos. Así es como se generan las animaciones. Imaginaros que lo que queremos es que nuestro logo se esté moviendo arriba y abajo todo el rato. Nos vamos al 'header', le decimos que la imagen que aparece en el 'header' es la que va a tener la animación. Voy a modificar esto para poner animación logo. En el "key frame" 0 va a tener un 'position' de 0, es decir, que su 'margin-top' va a ser 0. Y en el 100 %, su 'margin-top' va a ser de 30 píxeles. Es decir, que lo que estoy haciendo es moverlo 30 píxeles. Salvamos, actualizamos, dos segundos y comienza mi animación. ¿Veis cómo se mueve? Se está desplazando 30 píxeles, que es lo que yo le he especificado. Si quisiera que quedara un poco más natural, pues ya habría que jugar con los segundos en los que se está renderizando esa animación. Si lo modifico a 2, tarda 2 segundos. ¿Veis? Ahora va más rápido. Lo normal es que el ojo capte el movimiento con tres milisegundos. Ahí tenemos. Como le he dicho que es de tres milisegundos, está moviéndose todo el rato. Y además como es infinito, no va a dejar de moverse. Para no volver loco al usuario, podemos hacer que sea 1 segundo y que esté ahí moviéndose, y entonces ya tenemos una animación realizada en nuestro diseño.

CSS avanzado: 12 trucos

Descubre con estos 12 ejemplos cómo abordar los diseños y plantearlos para construir estructuras estándares de HTML5 con efectos CSS3 útiles en nuestro día a día como maquetadores.

1:04 horas (15 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:6/09/2016

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.