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/