CSS3 Animaciones de texto usando transitions

Flash-to-HTML-5-450x202Gracias a las nuevas propiedades de CSS3 podemos realizar animaciones de texto como aplicar una rotación con un efecto de transición, para ello utilizaremos las propiedades “transition” y “transform“.

Deberemos incluir unos de los prefijos “-webkit”, “-moz”, “-ms” o “-o” para los diferentes navegadores  ya que estas propiedades aun no son estándares el 100%.

Prefijos:

  • “-webkit”: Chrome, Safari 3.1+
  • “-moz”: Firefox 3.5-15
  • “-ms”: IE 9
  • “-o”: Opera 10.50-12.00
  • Sin prefijo para Firefox 16+, IE 10+, Opera 12.10+

CSS3: Transiciones

#one {
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
}

Con esto le decimos a la regla “transition” que anime a todos los elementos contenidos que sean animables (all) dentro de la capa div con identificador “one“, depués le decimos el tiempo (1 segundo) y con la propiedad “ease-out” le decimos que vaya de más lento a más rápido (aplicación en linea para crear efectos muy interesante).

Nota: IE9 y versiones previas no soportan propiedad transition.

Nota: Chrome 25 y  versiones previas requieren prefijo -webkit-.

A continuación a la misma regla CSS añadimos un efecto de rotación, con la propiedad “rotate” el elemento rota en el sentido de las agujas del reloj los grados que le digamos:

    transform: rotate(-35deg);
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);

A continuación establecemos algunas propiedades más para la capa con identificador “one”,  inicialmente será transparente con opacity.

    width: 300px;
    position: absolute;
    top: 240px;
    left: 645px;
    opacity: 0;

Creamos las propiedades de una segunda capa “#two” que contendrá más texto:

#two {
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transform: rotate(55deg);
    -webkit-transform: rotate(55deg);
    -moz-transform: rotate(55deg);
    -ms-transform: rotate(55deg);
    -o-transform: rotate(55deg);
    width: 300px;
    position: absolute;
    top: 660px;
    left: 640px;
    opacity: 0;
}

Animando con JQUERY

Primero añadimos el enlace a la librería jQuery en el head:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

A continuación nuestro código script:

</pre>
<script>
$(document).ready(function() {
    var interval1 = setInterval(one,1000);

    function one() {
        clearInterval(interval1);
        $('#one').animate({opacity: 1, left: '140', top: '110'}, 1000, 'linear', function() { two(); });
    }

    function two() {
        $('#two').animate({opacity: 1, left: '300', top: '260'}, 1000, 'linear', function() {});
    }
});
 </script>

La función setInterval establece que cada segundo se llame a la función “one”. Cuando se ejecuta la función “one” realiza las siguientes acciones:

  • clearInterval():
  • animate: Aplica sobre la capa con identificador “one” la funcion animate de jQuery. El método animate() de jQuery permite animar varias propiedades, con valores numéricos, de CSS en un solo paso.

VER EJEMPLO

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s