Ejemplos CSS3 Animaciones Transform

Si ya vimos en el anterior artículo unos ejemplos sencillos de animaciones con CSS3, en éste veremos cómo utilizar la propiedad transform para crear animaciones escalando y rotando objetos.

Veamos el primero. A continuación veremos cómo hacemos que un objeto cambie su escalado en tres pasos. En el primer paso (0%) el escalado es 1. Cuando se ejecute el segundo paso (50%) el escalado es del doble (2), y en el tercer y último paso (100%) vuelve al escaldo normal. Se consigue un efecto en el que el objeto crece y decrece.

Aquí está el ejemplo del que podéis ver el código:

See the Pen CSS3 Animation – Transform Scale by Trescomatres (@trescomatres) on CodePen.

Por otro lado, en el segundo ejemplo, que es muy parecido, hacemos que el objeto vaya rotando. Se cumplen 4 pasos (0%, 25%, 50% y 100%) en los que hacemos que el objeto vaya rotando 90%. Consecuentemente, hacemos que el objeto gire del todo. Es sólo un ejemplo, debido a que sería lo mismo hacerlo en sólo dos pasos y girando 360 grados.

El objetivo del artículo es otro, el mostrar los diferentes pasos (keyframes) hemos creado la animación con 4 pasos. Aquí está en acción y la posibilidad de ver el código:

See the Pen CSS3 Animation – Transform Rotate by Trescomatres (@trescomatres) on CodePen.

Fijaos en el código, y más concretamente en las dos siguientes líneas:

...
animation-duration: 5s;
animation-iteration-count: infinite;
...

La primera de las propiedades, animation-duration, indica el tiempo de la animación. El segundo, animation-iteration-count, indica las veces que debe repetirse la animación. Puede ponerse un número natural, o como en el ejemplo, poner infinite para que se repita de forma infinita.

Artículo anteriores relacionados:

Ejemplos CSS3 Animaciones (1)

Más ejemplos de código de Trescomatres en CodePen.io

Ejemplos CodePen-io en Trescomatres

Perfil de Trescomatres en CodepPen.io

https://codepen.io/trescomatres/

Información relacionada

Deja un comentario

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

*