Comunidad de diseño web y desarrollo en internet online

Animación fluida con CSS3

Hace un tiempo creé un ejemplo de lo que se podría hacer con animaciones con simples puntos y ahora os quiero mostrar que con animation de CSS3 podemos crear movimientos bastante "naturales" con rotaciones, que sean fluidos (en el ejemplo se puede ver a lo que me refiero).
En este artículo daré por hecho que todos sabemos como funcionan las animaciones, y si no es así os invito a ver este manual de como hacerlas.



Crear la fluidez


Tenemos varios ejemplos, el del Balancín, el de subir una escalera y el de la biela manivela, en los tres jugamos con las rotaciones, pero en elementos que están por debajo del anterior. Por ejemplo, en el balancín tenemos 3 barras, y una está dentro de otra, lo que significa que al girar la primera la siguiente también lo hará y que a su vez gira.

Puede ser un poco difícil de explicar y de entender, pero si nos fijamos en el primer ejemplo vemos este efecto, girando la barra azul y por otro lado las que están dentro (más abajo con el código se ve claro cómo surge este efecto).

Cómo funciona


Como he comentado antes tenemos que crear el efecto de fluidez, pero antes de esto tenemos que crear la estructura, que simplemente son tres etiquetas DIV, una dentro de la otra.

Código :

<div>
    <div>
        <div>
        </div>
    </div>
</div>


El balancín

La estructura del código HTML es la misma en los tres ejemplos, lo que varía son los @keyfreme. El @keyfreme de la barra central hace un balanceo simple sin rotar y las 2 interiores tienen el mismo (simplemente una rotación que en cierto punto vuelve) y la diferencia de los recorridos de ellas está en que lo hacen en distinto tiempo.

Este es el @keyfreme de este ejemplo:

Código :

/* Es el @keyfreme de la barra con el borde azul */
@keyframes balanzin_principal {
    0%{transform:rotate(60deg)}
    50%{transform:rotate(-60deg)}
    100%{transform:rotate(60deg)}
}
/* Es el @keyfreme de la barra con el borde azul */
@keyframes balanzin_principal {
    0%{transform:rotate(40deg)}
    50%{transform:rotate(-600deg)}
    100%{transform:rotate(40deg)}
}

En el momento que establecemos el @keyfreme de la animación podemos probar la velocidad para que se ajuste a un movimiento más o menos realista.

Escalera y biela manivela

En estos dos ejemplos se diferencian del primero (balancín) en que la rotación empieza en el extremo de la etiqueta que lo contiene, y esto se hace con una propiedad que afecta a todas las transformaciones que se crean con transform llamada transform-origin, donde establecemos desde dónde empieza a rotar.

Código :

<!-- En el ejemplo de la escalera y de la biela manivela tomamos como origen la parte superior y el medio -->
   transform-origin:top;

Esta es una forma con la que podemos animar varias cosas con CSS3 (por ejemplo se podría recrear el movimiento de una serpiente o un árbol que lo mueve el viento) y podríamos crear cosas parecidas a las que se podían crear con flash, simplemente hay que saber sacar partido a lo que actualmente tenemos.


Ver ejemplos: Xitrus

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate