Animaciones CSS3 avanzadas

21/Jun/2011 352

He estado impaciente para darme la libertad de investigar y escribir algo más avanzado utilizando CSS3 y animaciones, ya que el soporte de ciertas propiedades están más extendidas y si las comenzamos a utilizar en nuestros proyectos podemos forzar un poco la adaptación de estos nuevos estándares. Mi idea no es utilizarlas aún al 100%, sino que entregando una alternativa para navegadores menos avanzados en estas propiedades (existen algunos frameworks que lo están permitiendo, ver enlaces al final).

En este artículo les mostraré un par de propiedades que pueden marcar la diferencia ente lo que pensabas conocer sobre CSS y lo que se pretende sea la capacidad nativa de los browsers de permitirnos interacciones mucho más ricas y lo mejor, y más rápidas.

* He intentado sin buenos frutos hacer andar por lo menos un par de ejemplos en IE9 y no hay caso, seguiré investigando

Transiciones 4+ & Mobile11+11+5+

La propiedad transition-duration define el tiempo de duración total de una transición de un estado A a uno B, sea el que sea el estilo que estamos dando.

Ya la propiedad transition-timing-function define el rango el cual la transición ocurre, lo que puede incluir aceleraciones o desaceleraciones. Básicamente, describe cómo la animación ocurre durante el tiempo definido en transition-duration.

En el siguiente ejemplo las 3 cajas tienen la misma transformación, pero usan diferentes valores para transition-timing-function:

Ver ejemplo 1

En el siguiente ejemplo, haremos intervalos de medio segundo (0.5s) en la ejecución de un estilo através de la propiedad transition-duration:

Ver ejemplo 2

Transformaciones 3D 4+ & Mobile11+

Este tipo de propiedades aún tienen un soporte limitado (browsers Webkit principalmente, incluyendo móviles) pero se espera que pronto se amplíe (por eso me doy el tiempo de considerarlo en este artículo). El principio básico es el keyframe, y si has usado Flash u otra herramienta de animación (Live Motion, After Effects) comprenderás este concepto:


Un keyframe define el estilo que será aplicado en ese momento dentro de un lapso de animación. El motor de animación del browser interpolará los estilos definidos entre esos keyframes.

Veamos un ejemplo: comenzamos por definir una rotación, dándole un nombre y un comportamiento:

@-webkit-keyframes girando {
  from { -webkit-transform: rotateY(0deg);    }
  to   { -webkit-transform: rotateY(-360deg); }
}

Acabamos de crear un comportamiento para un keyframe y lo llamamos girando. La animación se moverá y rotará en relacion al contenedor que determinemos ahora:

#contenedor {
   margin: 30px auto;
   -webkit-perspective: 600px;
}

Con -webkit-perspective definimos el movimiento del elemento en 3D en el eje Z (creando el efecto de profundidad), el que no puede ser definido antes con el simple CSS2 (ya que es sólo 2D).

Ahora integramos el keyframe con el contenedor, además de agregar el tiempo de duración de la animación:

#girando {
   -webkit-animation-name: girando;
   -webkit-animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-duration: 3s;
   -webkit-transform-style: preserve-3d;
}

Ver ejemplo 3

Ejemplo 3 CSS3 Avanzado en CSSLab.cl

Para girar un grupo de elementos que se posicionan dentro de otro, debemos posicionar estos elementos de manera absoluta y girar cada uno en grados según la cantidad de elementos que sean. La magia no sólo está en estas nuevas propiedades que entrega Webkit, sino que además en las que CSS3 trae como box-shadow, rgba y text-shadow:

Ver ejemplo 4

Interesante es lo que puedes lograr agregando la propiedad:

-webkit-backface-visibility: hidden;

Donde se oculta la cara del elemento que está al contrario dado el efecto 3D; con esto podemos disminuir la carga del procesador del computador al renderizar esta parte del elemento HTML:

Ver ejemplo 4.1

Cambiamos un poco el código para poder hacer rotar un cubo; verás que los únicos cambios han sido meramente estéticos y de rotación del elemento con translateZ(90px). Además, agregamos la animación por lapsus de tiempo, con la cual podremos hacer pausas y definir cuánto y qué cosas se moverán en tales instantes:

@-webkit-keyframes girando {
   from,20% 	{ -webkit-transform: rotateY(0deg);   }
   30%,40%  	{ -webkit-transform: rotateY(90deg);  }
   50%,60%  	{ -webkit-transform: rotateY(180deg); }
   70%,80% 	{ -webkit-transform: rotateY(270deg); }
   90%,to	{ -webkit-transform: rotateY(360deg); }
}

Ver ejemplo 5

Y para el final, una integración del cubo rotundo anterior con vídeos através de HTML5, en los que puedes ver tienen una gran performance ya que son propiedades nativas (Chrome / Safari):

Ver ejemplo 6

Siento que estamos presenciando un cambio en el paradigma donde la capa de presentación se está uniendo con la de interacción o lo que es mejor, una redefinición de desarrollo front-end. Si no te has aventurado en el código fuente, es mejor apurarte ya que la máquina está a toda velocidad.

Links:

Comentarios

  1. ivermectin for humans walmart [#]

    ivermectin 8000 Animaciones CSS3 avanzadas | CSSLab | Laboratorio de ideas web https://ivermectin1.com/ ivermectin

  2. MarvinFuh [#]

    get a prescription online
    online canadian pharmacies price of viagra buy viagra in canada generic viagra online pharmacy viagra online canadian pharmacy order cialis online canada discount meds viagra canada with prescription canada medication canadian online pharmacy
    canadian pharmacy meds low cost cialis buy cialis in canada online drug prices viagra pill

  3. gay dating websits [#]

    gay dating websites uk https://gay-singles-dating.com/

  4. gay professional dating [#]

    dating a gay guy who only tops https://gayonlinedating.net/

  5. Javier Manin [#]

    super pspk movie – Bhavadeeyudu Bhagat Singh

  6. Bhagat Singh Pawan Kalyan [#]

    X amateurs film x amateurs gratuit Look into my page film porno gratuit

  7. HenryUnfiP [#]

    australian gay dating
    sober gay dating
    pof gay dating site

  8. ivermectin tablets for humans [#]

    biaya pil ivermectin Animaciones CSS3 avanzadas | CSSLab | Laboratorio de ideas web https://ivermectin1.com/ ivermectin for humans over the counter

  9. that quest bars [#]

    I constantly emailed this blog post page to all my friends,
    since if like to read it then my links will too.
    quest bars http://bitly.com/3jZgEA2 quest bars

  10. app.gumroad.com [#]

    I have read so many posts on the topic of the blogger lovers however this
    paragraph is actually a nice post, keep it up. asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr

  11. dating gay wesitess [#]

    gay slave auction dating https://gayedating.com/

  12. ivermectin over the counter [#]

    ostaa stromektolia Animaciones CSS3 avanzadas | CSSLab | Laboratorio de ideas web https://ivermectin1.com/ ivermectin uk buy

  13. gay aryan knights dating [#]

    gay glasgow dating https://datinggayservices.com/

  14. j.mp [#]

    This is a great tip especially to those fresh to the blogosphere.
    Brief but very accurate info… Thanks for sharing this one.
    A must read article! cheap flights http://1704milesapart.tumblr.com/ cheap flights

  15. tinyurl.com [#]

    Very good info. Lucky me I recently found your site by chance (stumbleupon).
    I have saved it for later! scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

  16. bitly.com [#]

    Does your site have a contact page? I’m having a tough time locating it but, I’d like to send you
    an email. I’ve got some recommendations for your blog you might be interested in hearing.

    Either way, great website and I look forward to seeing it expand over time.

    scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

  17. http://tinyurl.com [#]

    Its not my first time to visit this site, i am browsing this
    site dailly and obtain fastidious data from here all
    the time. ps4 games https://bitly.com/3nkdKIi ps4 games

  18. http://bit.ly [#]

    Hmm it looks like your site ate my first comment (it was
    extremely long) so I guess I’ll just sum it up
    what I had written and say, I’m thoroughly enjoying your blog.
    I too am an aspiring blog writer but I’m still new to everything.
    Do you have any tips and hints for newbie blog writers?

    I’d really appreciate it. cheap flights http://1704milesapart.tumblr.com/ cheap flights

  19. HenryUnfiP [#]

    gay fetish dating site
    surge gay dating site nj
    best gay dating site 2021

  20. coub.com [#]

    I don’t know whether it’s just me or if perhaps everyone else experiencing problems with your
    site. It looks like some of the written text on your content are running off the screen. Can someone else
    please comment and let me know if this is happening to them as well?
    This might be a problem with my browser because I’ve had this happen previously.
    Many thanks scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery

  21. Mobile recharge [#]

    What a beautiful blog

  22. www.iherb.com [#]

    I like what you guys tend to be up too. Such clever work and exposure!
    Keep up the good works guys I’ve included you guys to blogroll.

    quest bars https://www.iherb.com/search?kw=quest%20bars quest
    bars

  23. HenryUnfiP [#]

    black male gay dating service
    gay dating site south africa
    gay cam dating

  24. instagram takipçi hilesi [#]

    Appreciate this post. Let me try it out.

  25. tadalafil vidalista 10mg [#]

    Hello to all, the contents existing at this site are
    truly amazing for people knowledge, well, keep up the good work
    fellows. http://www.deinformedvoters.org/vidalista-online

  26. canada pharmacy [#]

    reputable canadian pharmacy

  27. Garcheedarap [#]

    advair 500 coupon

  28. when tadalafil patent expires [#]

    Piece of writing writing is also a excitement, if you know after that you can write
    otherwise it is difficult to write. https://tadalafili.com/

  29. online pharmacy canada [#]

    online drugstore

  30. HenryUnfiP [#]

    gay site dating
    nytimes gay dating sites
    adam for adam gay dating site

  31. zyrtec for children under 2 [#]

    zyrtec buy – http://allergyd.com

  32. stromectolforte.com [#]

    side effects for ivermectin http://stromectolforte.com/# ivermectin О±ОіОїПЃО¬ПѓП„Оµ online ohio judge ivermectin ruling

  33. prescription strength zyrtec 20 mg [#]

    zyrtec sale – http://allergyd.com

  34. pharmacepticacom [#]

    canada generic tadalafil https://www.pharmaceptica.com/

  35. buy stromectol [#]

    a asian pharmacies ivermectin no prescription https://stromectolforte.com/ stromectol pills ivermectin tablets for sale

  36. ivermectin australia [#]

    Accustomed Information Fro this by-product
    https://ivermectinstrom.com ivermectin 12 mg
    https://stromectolivermect.com ivermectin australia
    https://ivermectstromect.com ivermectin for humans
    https://ivermectinst.com stromectol 3mg
    https://stromectolivermect.com ivermectin for sale

  37. stromectolforte.com [#]

    stromectol https://stromectolforte.com/ is ivermectin safe for people ivermectin new zealand

  38. drineexkac [#]

    what is modafinil used for https://modafinilprovigilok.com/

  39. modalertonline [#]

    where to buy modafinil reddit provigil 100 mg

  40. bactrim cream [#]

    trimethoprim brand name Sulfamethoxazole and alcohol

  41. pharmaceptica [#]

    tadalafil research https://pharmaceptica.com/

  42. modafinildosage [#]

    adrafinil vs modafinil modafinil 200mg

  43. bactrim antibiotic [#]

    sulfamethoxazole medication https://bactrimtrimoxazole.com/

  44. accutane medication [#]

    isotretinoin https://genisotretinoin.com/

  45. modalert200 [#]

    armodafinil vs modafinil provigil prescription

  46. ivermectin 3mg [#]

    ivermectin dosage https://stromectolforte.com/ ivermectin tablets where to buy ivermectin pills for humans

  47. modalertonline [#]

    modafinil weight loss where to buy modafinil

CSSLab