Contenido

Mozilla Firefox, por fín CSS Transitions

23 Feb

+ 17

Via Twitter descubro que Firefox 3.7 (la versión pre-alpha2) ya dispone de CSS Transtions. El sistema con el cual mediante sentencias CSS podemos aplicar movimiento a elementos HTML de nuestra página. Esta funcionalidad, disponible en WebKit desde hace ya bastante tiempo, nos permite realizar tareas que actualmente se realizan mediante Javascript, en la capa de funcionalidad, en la capa de diseño, algo que ha levantado dispares opiniones al respecto.

// HTML
<ul>
 <li id="long1">Long, gradual transition...</li>
 <li id="fast1">Very fast transition...</li>
 <li id="delay1">Long transition with a 2-second delay...</li>
 <li id="easeout">Using ease-out timing...</li>
 <li id="linear">Using linear timing...</li>
 <li id="cubic1">Using cubic-bezier(0.2, 0.4, 0.7, 0.8)...</li>
</ul>

// CSS
#delay1 {
 position: relative;
 -moz-transition-property: font-size;
 -moz-transition-duration: 4s;
 -moz-transition-delay: 2s;
 font-size: 14px;
}

#delay1:hover {
 -moz-transition-property: font-size;
 -moz-transition-duration: 4s;
 -moz-transition-delay: 2s;
 font-size: 36px;
}

Podemos descargar la última versión de desarrollo de Firefox y probarlas en nuestras manos usándo la documentación que Mozilla nos ha preparado.

  • Um, ¿No había mozilla abandonado la versión 3.7 para saltar directamente a la 4?
    http://mashable.com/2010/01/15/mozilla-drops-firefox-3-7/

    De todas formas se llame como se llame la versión, ya era hora que sacaran css transitions en Firefox, es el complemento perfecto a las css transforms.

  • Pues… yo soy de los que opinan que estas cosas deberían ser creadas solamente con javascript… Considero que el papel del CSS es diferente (en mi opinión).

    Es una tontería usar CSS porque a la mínima que te quieras complicar te vas a quedar corto y vas a necesitar usar Javascript (es mi opinión). Eso o que no he sabido entender el fundamento de las transiciones CSS.

    Un saludo!!

  • opino lo mismo que @jose cabo

  • Opino lo mismo! CSS no movement please!! :·)
    Evitemos la duplicidad de funcionalidades entre CSS y jQuery. Será todo un lío!

  • 100% de acuerdo con Jose Cabo

  • Tal vez pasarán a nombrarlo como Firefox 4.0 cuando salga algún beta (como hicieron el cambio de Firefox 3.1 a 3.5)

    Respecto al artículo, no le veo mucha utilidad, digo, eso ya es posible con JavaScript y la funcionalidad de CSS es otra.

    Saludos!

  • Bueno, tampoco soy muy amigo de meterle animaciones al CSS, pero sí que le encuentro cierta utilidad, sobre todo en entornos donde se desactive JavaScript o no esté disponible (vale, no hay muchos, pero haberlos los haylos)

    Entre depender de una librería para realizar estas acciones, o que esté disponible de forma nativa en los navegadores (cuando lo soporten)… siempre será positivo que sea nativo. Éso sí, no creo que deba formar parte del css. Así que tampoco sabría donde ponerlo.

    De todas formas, nos saltaríamos el tener que lidiar con una o varias librerías JS si no hacemos animaciones muy complicadas. Es una opción más.

  • De acuerdo con @charlie, gracias por la información, no sabia que mozilla tambien tiene, lo unico que le falta son las transformaciones 3d que tiene el webkit son muy buenas 🙂

    http://webkit.org/blog/386/3d-transforms/

    Saludos

  • yo creo que debería estar implementado en HTML5.

  • Bueno, pues yo discrepo en lo de las css transitions. Mi argumento: si tenemos :hover en CSS para cambiar un color/img de fondo o color de texto al poner el ratón encima de un enlace, ¿por qué no hacer que ese cambio de color sea suave? ¿añade eso ‘funcionalidad’? no, es un pequeño cambio estético, no es más funcionalidad que la que añade el :hover. Veo ‘overkill’ tener que añadir javascript para ese efecto. Para mí las css transitions deben ser para eso: añadir una transición en un cambio de color o cambio de tamaño/rotación durante un hover. Las css animations (que no es lo mismo) sí deberían quedarse fuera, no hay mas que ver el código de cualquier demo para ver que eso debería estar enmarcado en un lenguaje de programación.

    • @David Rojas: Estoy de acuerdo con David Rojas, ademas Css siempre sera mas liejro a la hora de cargar que un java script y una funcionalidad mas es una mas, no olvideis que Css sigue evolucionando. Un saludo a todos y felicitarte a Nieto2k por tu trabajo.

    • @David Rojas: También lo apoyo… Si lo único que se busca en un sitio es que las cosas de desvanescan al pasar el mouse, cargar toda una librería de efectos me parece contraproducente.
      No veo que hay de problema en darle más poder al css, es ovbio que los que sudaron frío por dominar tal o cual librería de efectos hoy sienten sus conocimientos amenazados por algo que surge como nuevo y no tardan en tacharlo de inutil. Hay que darle una oportunidad.

  • Ya veo que hay bastante tiempos que no comentan, he leído toda la página incluyendo los comentarios y apoyo lo que dice @Esteban Peña, las CSS día a día evolucionan más y es bueno mantenernos informados.

  • Aunque incluir animaciones en CSS es un importante paso para no usar ni Flash ni más scripts de los necesarios, está funcionalidad debe limitarse a JavaScript, que precisamente es su labor, no CSS.

    CSS es para diseño, propiedades para hacer sombras, esquinas redondas, reflejos,etc. es ideal porque ahorra el uso del photoshop, pero lo de las animaciones me parece un poco lío, sigo prefiriendo javascript.

    • @SERGIO: No lo veo igual, creo que se debe diferenciar entre el Javascript que usa para aportar funcionalidad a la página y el javascript que modifica el aspecto de la página.

      Aquí es donde CSS y Javascript se «fusionan», dando lugar a este tipo de mejoras. De esta forma un maquetador, no tienen por que conocer un lenguaje destinado inicialmente a aportar funcionalidad a una página.

      Por el momento, la solución si o sí, es Javascript. Pero la idea de la W3C es matizar más el uso de Javascript y ampliar el potencial del CSS por este motivo.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.