Realizar animaciones en la página es muy fácil con CSS3
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 70
Visitas el mes pasado: 103
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
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); }
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); }
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.
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; }
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:
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:
En la siguiente página mostraremos las transformaciones en tres dimensiones.
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com