Aunque la gente espera algunos cambios en la pantalla, CSS y HTML pueden hacer muy poco para la interacción en la página y aún deben implementarse en el código.
Por ejemplo, un enlace es de este color o de aquel color; un área de texto es así de grande o así de grande; una imagen es transparente u opaca, cambian directamente de un estado a otro; no hay transición entre ellos .
Esto da como resultado que la mayoría de las páginas web sean algo rígidas, ya que los elementos solo cambian o cambian de manera rígida.
Sí, puedes exagerar usando DHTML, jQuery o escribiendo tu propio JS, pero esto requiere más código para implementar lo que debería ser una funcionalidad muy simple.
Lo que necesitamos es una forma rápida y sencilla de agregar efectos de transición simples a la página. En este artículo, encontrará información útil sobre las transiciones CSS y cómo usarlas.
Hace unos meses, sugerí que los diseñadores deberían comenzar a usar las nuevas tecnologías CSS 3 para lograr algunas funciones básicas que habían estado anhelando durante mucho tiempo; el único problema era que ninguna de estas tecnologías estaba disponible en IE, incluido IE8.
La opinión de que algunos lectores creen que esas tecnologías serán invisibles para el 75% de los usuarios no es confiable.
A esos lectores, quiero decirles: "Esperad fuerte", porque estoy a punto de presentarles otra nueva propiedad CSS que les permite agregar interesantes efectos de transformación a cualquier elemento con solo unas pocas líneas de código.
Las transformaciones CSS se acaban de introducir en CSS 3, pero se agregaron como una extensión del kit web. Es decir, ahora sólo se pueden utilizar en navegadores basados en webkit, incluidos Apple Safari y Google Chrome. Sin embargo, a juzgar por la versión pre-Alfa de Opera 10.5, Opera admitirá transformaciones CSS 3 en la próxima versión 10.5. Entonces , para ver los efectos reales mencionados en este artículo, se recomienda encarecidamente que utilice Chrome o Safari 4 para ver este artículo .
¿De dónde vienen las transformaciones CSS?
Las transformaciones solían ser solo una parte de Webkit y la base de algunas cosas interesantes que la interfaz de usuario de Safari podía hacer y que otros navegadores no podían.
Sin embargo, el Grupo de Trabajo CSS del W3C se ha negado a agregar transformaciones a sus características oficiales, y algunos miembros insisten en que las transformaciones no son propiedades de CSS y que se manejarían mejor a través de scripts. (Estoy lleno de confianza. Tuve un punto de vista similar en el párrafo anterior y lo hablé con Gao Gao. Creo que la animación CSS está más allá del alcance del rendimiento. Las cosas interactivas deben implementarse con scripts. Pero más adelante, bajo el guía del hermano Gui, comencé a Con una nueva comprensión - Shen Fei)
Pero muchos diseñadores y desarrolladores, incluido yo mismo, insistimos en que estos son efectivamente estilos, simplemente estilos dinámicos , en lugar de los estilos estáticos tradicionales que usamos todos los días.
Afortunadamente, el debate sobre el estilo dinámico es cosa del pasado. En marzo pasado, representantes de Apple y Mozilla comenzaron a agregar módulos de transformación CSS a las funciones de CSS 3, muy parecido a lo que Apple ya había agregado a WebKit.
Una breve introducción a las mejoras de diseño.
Antes de continuar, permítame enfatizar esto: nunca haga que la funcionalidad de un sitio web dependa de un estilo si el estilo no es universal para el navegador (es decir, compatible con todos los navegadores utilizados comúnmente).
Vuelvo a enfatizar para aquellos que se lo perdieron: nunca dejes que la funcionalidad del sitio web dependa del estilo, si el estilo no es universal en todos los navegadores .
Esto significa que puede utilizar estilos, como transiciones, como mejoras de diseño para mejorar la experiencia del usuario, sin sacrificar la usabilidad para los usuarios que no pueden verlos. Si funciona sin transformaciones CSS y los usuarios aún pueden completar sus tareas, entonces está bien y puede usar transformaciones CSS.
Traducido de: Transiciones CSS 101
Chino: Introducción a las transformaciones CSS3 Autor original: Jason Cranford Teague
Traductor: Shenfei, respete los derechos de autor e indique la fuente al reimprimir. ¡Gracias!