banner
hace 4 años
1055 Views

Animaciones Css3

Autor:
banner

 
 
Las nuevas reglas Css3, permiten crear Animaciones Css3, con las cuales generar diseños mas dinámicos, interactivos y en ultima instancia mas profesionales.

 

Estas Animaciones Css3, necesitan tener dos estados del elemento generados; una en reposo y otra activada (“hover”).

 
 
 

Vamos a ver las Propiedades de Transiciones Css3

 

Esta novedad Css3 nos permite crear estilos dinámicos mediante las transiciones Css3, estableciendo cuatro parámetros podremos generar Animaciones Css3, fácilmente.

css3 transiciones

Estos cuatro parámetros son:

 

  • transition-property: width;
  • transition-duration: 1s;
  • transition-timing-function: linear;
  • transition-delay: 2s;

 

Forma abreviada

transition: height 6s linear 1s;

 

Mas Información en: W3Schools Transitions

 

Propiedad Transformación Css3

 

La propiedad “transform” de Css3 nos permite generar transformaciones 2D3D a los elementos web.

 

Para aplicar estas transformaciones Css3 necesitaremos crear un elemento al que aplicarle la Transformación Css3, insertaremos una imagen con la cual realizar todas las Transformaciones Css3.

 

Combinando las Transformaciones Css3 podemos crear Animaciones Css3 muy visuales y profesionales, de manera muy sencilla.

 

<;img class="rotate" src="1.jpg" width="400" height="400"/>;

 

Definimos la clase para la imagen, así como la ruta de la misma y sus dimensiones

 

Mas Información en W3Schools Transform Property

 

Ver tipos de Transformaciones Css3

Transiciones Css3

Son Scale, Rotate, Skew y Translate

 

Propiedad Scale

 

  La propiedad Scale permite escalar los elementos y con ello generar Animaciones Css3 aumentando y disminuyendo el tamaño de los elementos.

 

Definimos el estado de reposo con la escala en 1, que representa el tamaño original del elemento.

 


img.rotate{
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
 }

 

Esta vez definiremos el estado activado (“hover”), en el cual delimitaremos el tiempo de animación a (3s) con un tiempo de transición “ease”.

 

En ese periodo de tiempo mediante“transform:scale (2,2)” generamos un aumento del elemento en 2,2.

 

 img.rotate:hover{

 transition:All 3s ease;
 -webkit-transition:All 3s ease;
 -moz-transition:All 3s ease;
 -o-transition:All 3s ease;

 -webkit-transform: scale(2, 2);
 -moz-transform: scale(2, 2);
 -o-transform: scale(2, 2);
 -ms-transform: scale(2, 2);
 transform: scale(2, 2);
 }
 

 

Propiedad Rotate

 

Esta propiedad permite crear rotaciones a elementos web, creando así efectos visuales de alta calidad.

 

Con este código definimos que nuestro elemento va a tener 0 grados de rotación , en posición reposo.

 

img.rotate{
transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
}

 

El código Css3 define la duración de la animación (3s), así como la propia propiedad de rotación; en este caso rotaría 360 grados.
 


img.rotate:hover{
transition:All 3s ease;
-webkit-transition:All 3s ease;
-moz-transition:All 3s ease;
-o-transition:All 3s ease;

transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}

 

Propiedad Skew

 

Esta propiedad voltea los elementos y solo utiliza un único parámetro (grados)

 

transform: skew(20deg);

 

Propiedad Translate

 

Con esta propiedad podemos trasladar el elemento por la pantalla del navegador, es muy útil para crear modernas animaciones, así como juegos Html5.

 

Para trasladar un elemento por la pantalla necesitamos este código:

Definimos dos parámetros el desplazamiento horizontal (300px) y después el vertical (100px).

 

transform:translate(300px, 100px);

 

Acabamos de recibir el conocimiento base de las transiciones y transformaciones Css3

 

A practicar, y a seguir Desarrollando así es como se mejora día a día

 

Cualquier duda o problema no te quedes sin preguntar

Sendoa

Sendoa

¡Aúpa! Me llamo Sendoa y soy un apasionado del Diseño y Desarrollo Web.

Fundador de WebSdcStudio.es; mi blog personal, donde expongo diferentes contenidos de ayuda, consejos, trucos, recursos... sobre el mundo del Diseño y Desarrollo Web.
Sendoa

Latest posts by Sendoa (see all)

Articulos Relacionados

Tags Artículos:
Artículos Categorías:
Css3 · Desarrollo Web
banner

Deja un Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Left Menu Icon
Web Sdc Studio
Right Menu Icon