Las animaciones CSS es un módulo propuesto para hojas de estilo en cascada que permite la animación de elementos de documentos HTML utilizando CSS.
Animaciones CSS Nivel 1 | |
Nombre nativo | Animaciones CSS |
---|---|
Estado | Borrador de trabajo del W3C |
Publicado por primera vez | 20 de marzo de 2009 [1] |
Ultima versión | Nivel 1 11 de octubre de 2018 [2] |
Versión de vista previa | Borrador del editor [3] |
Organización | Consorcio Mundial de la red |
Comité | Grupo de trabajo CSS |
Editores |
|
Estándares básicos | CSS |
Dominio | CSS |
Abreviatura | CSS-ANIMACIONES-1 |
Sitio web | www |
Historia
Si bien la pseudoclase :hover
se ha utilizado para generar animaciones rudimentarias durante años, las extensiones de CSS en el ámbito de la animación fueron mínimas hasta finales de la década de 2000. Ya en 2007, WebKit había anunciado su intención de incluir animaciones, transiciones y transformaciones CSS como características de WebKit. También anunció la implementación de animación implícita y explícita a través de CSS en febrero de 2009. La animación CSS también se presentó como una característica de CSS3, el borrador de la especificación en curso administrado por el World Wide Web Consortium (W3C).
Actual
CSS Animations es un módulo de hojas de estilo en cascada. Permite a los usuarios desplazarse sobre los objetos y se reproducirá una animación. Actualmente, es adoptado por todos los principales motores de búsqueda. A pesar de la controversia de quienes prefieren la animación a través de Javascript, la etiqueta de desplazamiento ahora se usa ampliamente en la comunidad de Hojas de estilo en cascada.
gráficas vectoriales escalables
Además de vuelo estacionario , Scalable Vector Graphics soporta los @keyframes en regla, lo que permite un conjunto limitado de transformaciones a ser animada. Firefox y Chrome usaron las extensiones @ -moz -keyframes y @ -webkit-keyframes , respectivamente, antes de que se agregara @keyframes a la especificación CSS 3. [2]
Soporte del navegador
A partir de junio de 2011, Firefox 5 incluye compatibilidad con animaciones CSS. [4] La animación CSS también está disponible como un módulo en las versiones nocturnas de WebKit, así como en Google Chrome , Safari 4 y 5 y Safari para iOS (iPhone, iPod Touch, iPad), versiones de Android 2.xy 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 LP de iTunes .
Controversia
Al principio del desarrollo de la animación CSS, despertó la preocupación de aquellos que prefieren la animación a través de JavaScript [8] o, en menor medida, el lenguaje de integración multimedia sincronizado (SMIL); otros han afirmado que es un movimiento de Apple Inc. , el principal patrocinador del proyecto WebKit, para eludir la inclusión de Adobe Flash (y las animaciones Flash incumbentes ) en la línea iOS de la empresa de dispositivos móviles que utilizan Safari . [9] [10] [11] Además, aunque Cascading Style Sheets es un lenguaje de programación relativamente fácil de usar, muchos programadores todavía tienen dificultades para crear animaciones. Con 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 las copien. Sin embargo, incluso con estas controversias anteriores, las animaciones CSS se pueden encontrar predominantemente y se pueden usar ampliamente en Internet.
Ver también
Referencias
- ^ "Historial de publicaciones de nivel 1 de animaciones CSS - W3C" . W3C . nd . Consultado el 9 de abril de 2021 .
- ^ a b c Jackson, decano; Baron, L. David; Atkins Jr., Tab; Birtles, Brian; Hyatt, David; Marrin, Chris; Galineau, Sylvain, eds. (11 de octubre de 2018). "Animaciones CSS Nivel 1" . W3C . Grupo de trabajo CSS . Consultado el 9 de abril de 2021 .
- ^ Jackson, decano; Baron, L. David; Atkins Jr., Tab; Birtles, Brian; Hyatt, David; Marrin, Chris; Galineau, Sylvain, eds. (27/01/2021). "Animaciones CSS Nivel 1" . Borradores del editor del grupo de trabajo CSS . Consultado el 9 de abril de 2021 .
- ^ Notas de la versión de Mozilla Firefox , The Mozilla Foundation,21 de junio de 2011 , archivado desde el original el 12 de febrero de 2014 , consultado el 9 de abril de 2021
- ^ Hyatt, Dave (2007-10-31), "CSS Animation | WebKit" , WebKit , Surfin 'Safari , consultado el 9 de abril de 2021
- ^ Jackson, Dean (2009-02-05), "CSS Animation | WebKit" , WebKit , Surfin 'Safari , consultado el 9 de abril de 2021
- ^ "@keyframes rule (Internet Explorer)" , Microsoft Docs , Microsoft, 2018-11-25, archivado desde el original el 2018-11-26 , consultado el 2021-04-09
- ^ Snook, Jonathan (2007-10-31), CSS Animations in Safari , Snook.ca, archivado desde el original el 27 de enero de 2021 , consultado el 9 de abril de 2021
- ^ Kim, Arnold (2009-02-06), CSS Animation Coming to Safari, Ya in iPhone. ¿Menos dependencia de Flash? , MacRumors.com , consultado el 9 de abril de 2021
- ^ Palmer, Robert (2009-02-06), ¿ Animación CSS para reemplazar la necesidad de Flash en MobileSafari? No es probable , The Unofficial Apple Weblog , consultado el 9 de abril de 2021.
- ^ Ferrari, Vincent (2009-02-09), Animaciones CSS: ¿Un sustituto de Flash? , Apple Thoughts , consultado el 9 de abril de 2021
- ^ ButtonAnimations (2019-12-11). "Botón de animaciones CSS (con código)" . ButtonAnimations . Consultado el 9 de abril de 2021 .
enlaces externos
- Propuesta inicial de Apple
- Ejemplos de animación CSS
- Aprendiendo a usar animaciones CSS - con ejemplos prácticos