Hispanopedia Wiki
Articulo de referencia

animaciones CSS

{{Cite web|url=https://www.w3.org/standards/history/css-animations-1|title=CSS Animations Level 1 Publication History - W3C|website=W3C|date=n.d.|access-date=2021-04-09}} "},"ve...

Hispanopedia WikiContenido en espanolLectura gratuita

CSS animations es un módulo para hojas de estilo en cascada que permite animar elementos de documentos HTML utilizando CSS.

Historia

Si bien la pseudoclase :hoverse ha utilizado para generar animaciones rudimentarias durante años, las extensiones de CSS al ámbito de la animación fueron mínimas hasta finales de la década de 2000. Ya en 2007, WebKit anunció su intención de incluir animaciones, transiciones y transformaciones CSS como características de WebKit. También anunció la implementación de animaciones implícitas y explícitas a través de CSS en febrero de 2009. La animación CSS también se ha propuesto como una característica de CSS3, la especificación en desarrollo gestionada por el Consorcio World Wide Web (W3C).

Actual

Las animaciones CSS son un módulo de hojas de estilo en cascada (CSS). Permiten a los usuarios pasar el cursor sobre los objetos para que se reproduzca una animación. Actualmente, todos los principales motores de búsqueda lo utilizan. A pesar de la controversia generada por quienes prefieren las animaciones mediante JavaScript, la etiqueta `hover` se usa ampliamente en la comunidad de CSS.

Gráficos vectoriales escalables

SVG animado usando CSS 3

Además de hover , Scalable Vector Graphics admite la @keyframesregla @, lo que permite animar un conjunto limitado de transformaciones. Firefox y Chrome usaban las extensiones @-moz-keyframesy , respectivamente, antes de que se añadiera a la especificación CSS 3. [ 2 ]@-webkit-keyframes@keyframes

Compatibilidad con navegadores

Desde junio de 2011, Firefox 5 incluye soporte para animaciones CSS. [ 4 ] La animación CSS también está disponible como módulo en las versiones nightly de WebKit, así como en Google Chrome , Safari 4 y 5 y Safari para iOS (iPhone, iPod Touch, iPad), versiones de Android 2.x y 3.x, Internet Explorer 10+ y el navegador Microsoft Edge , el navegador web BlackBerry OS 6, con el -webkit-prefijo. [ 5 ] [ 6 ] [ 7 ] También se utiliza en iTunes 9 para admitir archivos iTunes LP .

Controversia

Al principio del desarrollo de la animación CSS, generó preocupación entre quienes prefieren la animación mediante JavaScript [ 8 ] o, en menor medida, el Lenguaje de Integración Multimedia Sincronizada (SMIL); otros han afirmado que se trata de una estrategia de Apple Inc. , principal patrocinador del proyecto WebKit, para evitar la inclusión de Adobe Flash (y las animaciones Flash existentes) en la línea de dispositivos móviles iOS de la compañía que utilizan Safari . [ 9 ] [ 10 ] [ 11 ] Además, aunque las Hojas de Estilo en Cascada son un lenguaje de programación relativamente fácil de usar, muchos programadores aún tienen dificultades para crear animaciones. Ante este problema, varias personas y sitios web han desarrollado y creado animaciones de botones CSS de código abierto con código [ 12 ] para que los usuarios lo copien. Sin embargo, incluso con estas controversias previas, las animaciones CSS se pueden encontrar y usar ampliamente en internet.

Véase también

Referencias

  1. ↑ "Historial de publicaciones de CSS Animations Level 1 - W3C" . W3C . s.f. Consultado el 9 de abril de 2021 .
  2. 1 2 3 Jackson, Dean; Baron, L. David; Atkins Jr., Tab; Birtles, Brian; Hyatt, David; Marrin, Chris; Galineau, Sylvain, eds. (2023-03-02). "CSS Animations Level 1" . W3C . CSS Working Group . Recuperado el 26 de marzo de 2023 .
  3. ↑ Baron, L. David; Birtles, Brian, eds. (2023-03-02). "CSS Animations Level 2" . CSS Working Group Editor Drafts . Recuperado el 26 de marzo de 2023 .
  4. ↑ Notas de la versión de Mozilla Firefox , The Mozilla Foundation, 21/06/2011, archivado del original el 11/08/2011 , consultado el 09/04/2021.{{citation}}: CS1 maint: bot: estado de la URL original desconocido ( enlace )
  5. ↑ Hyatt, Dave (31/10/2007), "CSS Animation | WebKit" , WebKit , Surfin' Safari , consultado el 09/04/2021
  6. ↑ Jackson, Dean (5 de febrero de 2009), "CSS Animation | WebKit" , WebKit , Surfin' Safari , consultado el 9 de abril de 2021
  7. ↑ "Regla @keyframes (Internet Explorer)" , Microsoft Docs , Microsoft, 25/11/2018, archivado del original el 26/11/2018 , consultado el 09/04/2021.
  8. ↑ Snook, Jonathan (31 de octubre de 2007), Animaciones CSS en Safari , Snook.ca, archivado del original el 27 de enero de 2021 , consultado el 9 de abril de 2021.
  9. ↑ Kim, Arnold (6 de febrero de 2009), La animación CSS llegará a Safari, ya está en iPhone. ¿Menos dependencia de Flash?, MacRumors.com , consultado el 9 de abril de 2021.
  10. ↑ Palmer, Robert (6 de febrero de 2009), ¿ La animación CSS reemplazará la necesidad de Flash en MobileSafari? Poco probable , The Unofficial Apple Weblog, archivado del original el 9 de febrero de 2009 , consultado el 9 de abril de 2021.
  11. ↑ Ferrari, Vincent (2009-02-09), CSS Animations: A Flash Substitute? , Apple Thoughts , consultado el 2021-04-09
  12. ↑ ButtonAnimations (11/12/2019). "Animaciones de botones CSS (con código)" . ButtonAnimations . Consultado el 09/04/2021 .
  • Propuesta inicial de Apple
Lecturas relacionadas
6 articulos
CSSCSSLas hojas de estilo en cascada ( CSS ) son un lenguaje de hojas de estilo que se utiliza para especificar la presentación y el estilo de un documen...AnimaciónAnimaciónLa animación es una técnica cinematográfica mediante la cual se manipulan imágenes fijas para crear imágenes en movimiento . En la animación tradic...HTMLHTMLEl lenguaje de marcado de hipertexto ( HTML ) es el lenguaje de marcado estándar para documentos diseñados para ser mostrados en un navegador web ....Kit webKit webWebKit es un motor de navegador utilizado principalmente en el navegador web Safari de Apple , así como en todos los navegadores web de iOS y iPadO...Consorcio de la World Wide WebEl Consorcio World Wide Web ( W3C ) es la principal organización internacional de estándares para la World Wide Web . Fundado en 1994 y dirigido po...SVGSVGScalable Vector Graphics ( SVG ) es un formato de imagen vectorial basado en XML para definir gráficos bidimensionales , con soporte para interacti...