adsense

XRL Tech Corner

Tutoriales online de programación, CMS, Raspberry y artículos sobre tecnología.

Animaciones css con transiciones

En este tutorial vamos a ver como se pueden realizar animaciones web con CSS.
Como algunos de vosotros habréis visto en Internet, algunas páginas web tienen efectos y animaciones muy vistosos. Generalmente usan Bootstrap y jQuery para realizar esos efectos.

como hacer una animacion web con css


En estos tutoriales vamos a trabajar con CSS únicamente (sin ningún framework como Bootstrap), para poder explicar las técnicas de animación sólo con CSS. 
Las diferentes técnicas que vamos a usar serán las siguientes: transiciones, transformaciones, animaciones por frames, y (en un tutorial aparte SVG).

Recomendado Utiliza el editor html css online para probar los ejemplos

 También tienes disponible el código fuente del tutorial en GitHub

Contenidos

Transiciones

Animar los colores


En este primer tutorial vamos a hablar de las transiciones, y vamos a empezar por los colores, después vamos a animar las propiedades de posición (top y left) y por último vamos a animar la opacidad de un div.


Quizás el ejemplo más representativo de un cambio de colores sea la transición de color en el botón principal de una web. Por ejemplo vamos a mostrar un botón de descarga, el cual queremos enfatizar con un cambio de colores al pasar el ratón por encima. Se cambiará del azul al rojo mediante una transición de 1 segundo de duración.


Pruébalo



Para realizar la animación del color, y en general cualquier tipo de animación, usaremos la propiedad CSS "transition: propiedad duración tipo de tiempo retraso".

Por defecto sino se especifica la propiedad está se establecerá a "all".
Del mismo modo si no se especifica la propiedad tipo de tiempo ésta se ajusta a "ease", y si no se especifica el retraso su valor por defecto es 0.

Es posible animar más de una propiedad a la vez, para ello hay que poner cada propiedad separada por comas.

Si esa usa la palabra "all" se animarán todas las propiedades (las que se puedan animar).

Hay que tener en cuenta que el ojo humano no es capaz de ver transiciones muy rápidas, por lo que es recomendable especificar un valor mínimo de medio segundo.

Otra cosa importante es que cada navegador no tiene exactamente el mismo tipo de código CSS para la transición, así que a veces tendremos que especificar código para un navegador concreto:

 para Chrome: -webkit-transition
 para Mozilla: -moz-transition
 para Internet Explorer: -ms-transition
 para Opera: -o-transition

Aunque no todas las propiedades necesitan prefijos. Es mejor revisar la especificación en la web para asegurarse.


Animar la posición



Es muy común animar la posición de un elemento dentro de la página. Ya sea utilizando elementos "escondidos" o "visibles" que se deslizan de arriba a abajo o de izquierda a derecha.

Para ello vamos a coger el ejemplo anterior del botón y vamos a deslizar lateralmente un texto diferente al pasar por encima el ratón. El texto del botón cambiará el precio de 129 € a el literal COMPRAR.

Crearemos dos etiquetas span dentro del botón cada una con el texto inicial e final. Y el resto será crear los estilos correspondientes:



 

class="boton"> class="texto primer">129€ class="texto segundo">COMPRAR

Pruébalo




Animar la opacidad



La opacidad también es una propiedad que se puede animar. Un ejemplo típico sería animar la opacidad de 20-30% al 100% al pasar por un encima de una caja de información, por ejemplo los datos de un hotel en el cual podemos hacer la reserva online.

 



  class="caja"> 

 

Hotel Majestic class="fa fa-star"> class="fa fa-star"> class="fa fa-star"> Madrid, 2km /> Hay disponibilidad limitada para las fechas elegidas. Reservar 


Pruébalo

Hotel Majestic

   Madrid, 2km
Hay disponibilidad limitada para las fechas elegidas.


Con esto concluye el primer tutorial de la serie de animaciones web con CSS
En el siguiente hablaremos sobre las transformaciones de los elementos de la página. 

Valora este artículo del blog:
Cómo instalar ubuntu linux en una máquina virtual ...
WPO para Wordpress

Artículos relacionados

 

Comentarios

No hay comentarios por el momento. Se el primero en enviar un comentario.
¿Ya està registrado? Ingresa Aquí
Invitado
Viernes, 20 Octubre 2017
Si desea registrarse, por favor rellene los campos de nombre de usuario y nombre.

Imagen Captcha