Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Animacion en CSS3

Realizar animaciones en la página es muy fácil con CSS3


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 40

Visitas el mes pasado: 52

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Introduccion a las animaciones
Desarrollo Web
animations CSS
W3CScools
CSS3 Transitions
W3CScools
CSS Animations Module Level 3
W3C Working Draft 20 March 2009
CSS Transitions Module Level 3
W3C Working Draft 01 December 2009
CSS 2D Transforms Module Level 3
W3C Working Draft 01 December 2009
CSS 3D Transforms Module Level 3
W3C Working Draft 20 March 2009
Uso de CSS transforms
mozilla: centro de documentación.
Curva de Bézier
Wikipedia.
Coordinate Transformation Matrices
Math is amazingy powerful
IE's CSS3 Transforms Translator
User Agent Man

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Animaciones CSS3 (VII)

Animaciones con transform

imagen css3_anim

Transiciones

La propiedad transform nos da juego para crear una serie de animaciones en la que los elementos de nuestra página cambian de aspecto. la forma más fácil es meterlos dentro de una transición con la pseudoclase hover:. El mecanismo es el mismo que vimos en la página Transiciones. Veamos algunos ejemplos:

A un <div=id="D1">Hola mundo </div> le aplicamos el siguiente código CSS:

#D1 { width:100px; height: 100px; background: red;
      border: 2px solid blue; border-radius: 10px;
      transition: all 2s;
      -webkit-transition: all 2s;	
      }
#D1:hover { transform:rotate(360deg) scale(0.4,0.4);
        -webkit-transform:rotate(360deg) scale(0.4,0.4);
        -o-transform:rotate(360deg) scale(0.4,0.4);		
        }
Hola mundo

El resultado puedes verlo aquí a la derecha. Al pasar el ratón por encima el elemento se transforma.

El código es el mismo que para cualquier transición con la pseudoclase :hover: en el elemento ponemos las propiedades de la transición, y dentro de la pseudoclase ponemos la transformación.

Veamos otro ejemplo con el siguiente <div=id="D2">Hola mundo </div>.

Su código CSS será el siguiente:

#D2 { width:100px; height: 100px; background: red;
    border: 2px solid blue; border-radius: 10px;
    transition: all 1s;
    -webkit-transition: all 1s;
				
    transform:rotate(-15deg) skewY(-30deg);
    -webkit-transform:rotate(-15deg) skewY(-30deg);
    -o-transform:rotate(-15deg) skewY(-30deg);
    }
#D2:hover { transform:rotate(15deg) skewY(30deg); 
      -webkit-transform:rotate(15deg) skewY(30deg);
      -o-transform:rotate(15deg) skewY(30deg);
      }

Hola mundo

Aquí partimos de un elemento que tiene ya una transformación, y cambiamos los valores de esa transformación en la pseudoclase hover.

Al pasar el ratón por encima el elemento cambia de forma pasando de la primera transformación a la segunda.


Animaciones

Hacer animaciones cambiando la propiedad transform consiste en pasar en la animación de unos valores en los métodos de transform a otros. Para ello ponemos la propiedad transform dentro de la regla @keyframes, y en concreto dentro de cada subregla, indicando en cada una de ellas los metodos con sus valores:

@keyframes anim1 {  
   from { transform: scaleX(1) rotate(-15deg) ;-o-transform: scaleX(1) rotate(-15deg) ; }
   to { transform: scaleX(-1) rotate(15deg);  -o-transform: scaleX(-1) rotate(15deg);}
}
@-webkit-keyframes anim1 {  
   from { -webkit-transform: scaleX(1) rotate(-15deg) ; }
   to { -webkit-transform: scaleX(-1) rotate(15deg);  }
}

La compatibilidad con navegadores ns obliga a repetir los códigos para que funcione en todos ellos con las formas experimentales.

Después ponemos el código CSS para el elemento al que se le aplica, el cual debe tener las propiedades de animación:

#D3 { width: 100px; height: 100px; background: red;
     border: 2px solid blue; border-radius: 10px;
     animation: anim1 2s ease-in-out alternate infinite;
     -webkit-animation: anim1 2s ease-in-out alternate infinite;
     }

Hola mundo

El resultado de la animación anterior es el que vemos a la derecha, Este es un ejemplo bastante simple, sin embargo con un poco de paciencia se pueden conseguir animaciones como la de la siguiente página de ejemplo:

Los planetas


En esta página el movimiento de los planetas se consigue mediante una rotación, y un cambio en el origen de la rotación con la propiedad transform-origin. Otro truco bastante empleado es la propiedad border-radius: 50%, que convierte un elemento cuadrado en redondo. El código del ejemplo anterior puedes verlo en la siguiente página:

Código de "Los planetas"










En la siguiente página mostraremos las transformaciones en tres dimensiones.

Transform 3D



Animación CSS3

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com