CSS animations

Last updated
CSS Animations
CSS Animations Level 1
Contra-zoom aka dolly zoom animation.svg
Interactive SVG using a hover effect
AbbreviationCSS-ANIMATIONS-1
Native name
CSS Animations
Status W3C Working Draft
First published20 March 2009 (2009-03-20) [1]
Latest versionLevel 1
March 2, 2023 (2023-03-02) [2]
Preview versionLevel 2
March 2, 2023 (2023-03-02) [3]
Organization World Wide Web Consortium
Committee CSS Working Group
Editors
  • Dean Jackson
  • L. David Baron
  • Tab Atkins Jr.
  • Brian Birtles
  • David Hyatt
  • Chris Marrin
  • Sylvain Galineau
[2]
Base standards CSS
Domain CSS
Website www.w3.org/TR/css-animations-1/

CSS animations is a proposed module for Cascading Style Sheets that allows the animation of HTML document elements using CSS.

Contents

History

While the pseudo-class :hover has been used to generate rudimentary animations for years, extensions of CSS into the realm of animation were minimal until the late 2000s decade. As early as 2007, WebKit had announced its intent to include CSS animation, transitions, and transforms as features of WebKit. It also announced the implementation of both implicit and explicit animation through CSS in February 2009. CSS animation has also been put forth as a feature of CSS3, the ongoing draft specification managed by the World Wide Web Consortium (W3C).

Current

CSS Animations is a module of Cascading Style Sheets. It allows users to hover over objects and an animation will play. Currently, it is adopted by all major search engines. Despite the controversy from those who prefer animation via Javascript, the hover tag is now widely used across the Cascading Style Sheets community.

Scalable Vector Graphics

Animated SVG using CSS 3 Epicyclic gearing animation.svg
Animated SVG using CSS 3

In addition to hover, Scalable Vector Graphics supports the @keyframes at-rule, allowing a limited set of transformations to be animated. Firefox and Chrome used the @-moz-keyframes and @-webkit-keyframes extensions, respectively, before @keyframes was added to the CSS 3 specification. [2]

Browser support

As of June 2011, Firefox 5 includes CSS animations support. [4] CSS animation is also available as a module in the nightly builds of WebKit as well as Google Chrome, Safari 4 and 5 and Safari for iOS (iPhone, iPod Touch, iPad), Android versions 2.x and 3.x, Internet Explorer 10+ and Microsoft Edge browser, the BlackBerry OS 6 web browser, with the -webkit- prefix. [5] [6] [7] It is also used in iTunes 9 to support iTunes LP files.

Controversy

Early on in the development of the CSS animation it had drawn concern from those who prefer animation via JavaScript [8] or, to a lesser-used extent, Synchronized Multimedia Integration Language (SMIL); others have claimed that it is a move by Apple Inc., the main sponsor of the WebKit project, to sidestep the inclusion of Adobe Flash (and the incumbent Flash animations) on the company's iOS line of mobile devices which use Safari. [9] [10] [11] Furthermore, although Cascading Style Sheets is a relatively easy to use programming language, many programmers still struggle with making animations. With this problem, several individuals and websites have developed and created open source CSS button animations with code [12] for users to copy. However, even with these previous controversies, CSS animations can be predominantly found and widely used across the internet.

See also

Related Research Articles

<span class="mw-page-title-main">Safari (web browser)</span> Web browser by Apple

Safari is a web browser developed by Apple. It is built into Apple's operating systems, including macOS, iOS, iPadOS and their upcoming VisionOS, and uses Apple's open-source browser engine WebKit, which was derived from KHTML.

<span class="mw-page-title-main">KHTML</span> Discontinued web browser engine

KHTML is a discontinued browser engine that was developed by the KDE project. It originated as the engine of the Konqueror browser in the late 1990s, but active development ceased in 2016. It was officially discontinued in 2023.

WebKit is a browser engine developed by Apple and primarily used in its Safari web browser, as well as all web browsers on iOS and iPadOS. WebKit is also used by the PlayStation consoles beginning from the PS3, the Tizen mobile operating systems, the Amazon Kindle e-book reader, Nintendo consoles beginning from the 3DS Internet Browser, and the discontinued BlackBerry Browser. WebKit's C++ application programming interface (API) provides a set of classes to display Web content in windows, and implements browser features such as following links when clicked by the user, managing a back-forward list, and managing a history of pages recently visited.

David Hyatt is an American software engineer and a Shadowrun game expansion author. Employed by Apple starting in 2002, he was part of the Safari web browser and WebKit framework development team. He also helped develop the HTML 5, XBL, and XUL specifications.

The blink element is a non-standard HTML element that indicates to a user agent that the page author intends the content of the element to blink. The element was introduced in Netscape Navigator but is no longer supported and often ignored by modern Web browsers; some, such as Internet Explorer, never supported the element at all.

<span class="mw-page-title-main">Acid2</span> Online HTML rendering test

Acid2 is a webpage that test web browsers' functionality in displaying aspects of HTML markup, CSS 2.1 styling, PNG images, and data URIs. The test page was released on 13 April 2005 by the Web Standards Project. The Acid2 test page will be displayed correctly in any application that follows the World Wide Web Consortium and Internet Engineering Task Force specifications for these technologies. These specifications are known as web standards because they describe how technologies used on the web are expected to function.

<span class="mw-page-title-main">Web development tools</span> Software used to test the UI of a website or web application

Web development tools allow web developers to test and debug their source code. They are different from website builders and integrated development environments (IDEs) in that they do not assist in the direct creation of a webpage, rather they are tools used for testing the user interface of a website or web application.

<span class="mw-page-title-main">Web typography</span> Publishing considerations for the Web

Web typography, like typography generally, is the design of pages – their layout and typeface choices. Unlike traditional print-based typography, pages intended for display on the World Wide Web have additional technical challenges and – given its ability to change the presentation dynamically – additional opportunities. Early web page designs were very simple due to technology limitations; modern designs use Cascading Style Sheets (CSS), JavaScript and other techniques to deliver the typographer's and the client's vision.

Animation of Scalable Vector Graphics, an open XML-based standard vector graphics format is possible through various means:

<span class="mw-page-title-main">CSS</span> Style sheet language

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

<span class="mw-page-title-main">Maciej Stachowiak</span> Polish American software developer (born 1976)

Maciej Stachowiak is a Polish American software developer currently employed by Apple Inc., where he is a leader of the development team responsible for the WebKit Framework. A longtime proponent of open source software, Stachowiak was involved with the SCWM, GNOME and Nautilus projects for Linux before joining Apple. He is actively involved the development of web standards, served as a co-chair of the World Wide Web Consortium's HTML 5 working group and was a member of the Web Hypertext Application Technology Working Group steering committee.

The Web Open Font Format (WOFF) is a font format for use in web pages. WOFF files are OpenType or TrueType fonts, with format-specific compression applied and additional XML metadata added. The two primary goals are first to distinguish font files intended for use as web fonts from fonts files intended for use in desktop applications via local installation, and second to reduce web font latency when fonts are transferred from a server to a client over a network connection.

<span class="mw-page-title-main">CSS box model</span> Model used for styling websites

In web development, the CSS box model refers to how HTML elements are modeled in browser engines and how the dimensions of those HTML elements are derived from CSS properties. It is a fundamental concept for the composition of HTML webpages. The guidelines of the box model are described by web standards World Wide Web Consortium (W3C) specifically the CSS Working Group. For much of the late-1990s and early 2000s there had been non-standard compliant implementations of the box model in mainstream browsers. With the advent of CSS2 in 1998, which introduced the box-sizing property, the problem had mostly been resolved.

<span class="mw-page-title-main">Google Swiffy</span> Software tool that converted SWF files to HTML5

Google Swiffy was a web-based tool developed by Google that converted SWF files to HTML5. Its main goal was to display Flash contents on devices that do not support Flash, such as iPhone, iPad, and Android Tablets. Swiffy was shut down July 1, 2016.

CSS Flexible Box Layout, commonly known as Flexbox, is a CSS web layout model. It is in the W3C's candidate recommendation (CR) stage. The flex layout allows responsive elements within a container to be automatically arranged depending on viewport size.

Encrypted Media Extensions (EME) is a W3C specification for providing a communication channel between web browsers and the Content Decryption Module (CDM) software which implements digital rights management (DRM). This allows the use of HTML5 video to play back DRM-wrapped content such as streaming video services without the use of heavy third-party media plugins like Adobe Flash or Microsoft Silverlight. The use of a third-party key management system may be required, depending on whether the publisher chooses to scramble the keys.

<span class="mw-page-title-main">Progressive web app</span> Specific form of single page web application

A progressive web application (PWA), or progressive web app, is a type of application software delivered through the web, built using common web technologies including HTML, CSS, JavaScript, and WebAssembly. It is intended to work on any platform with a standards-compliant browser, including desktop and mobile devices.

WebGPU is the working name for a potential web standard and JavaScript API for accelerated graphics and compute, aiming to provide "modern 3D graphics and computation capabilities". It is developed by the W3C GPU for the Web Community Group with engineers from Apple, Mozilla, Microsoft, Google, and others.

<span class="mw-page-title-main">CSS grid layout</span>

In Cascading Style Sheets, CSS grid layout or CSS grid creates complex responsive web design grid layouts more easily and consistently across browsers. Historically, there have been other methods for controlling web page layout methods, such as tables, floats, and more recently, CSS Flexible Box Layout (flexbox). CSS grid is currently not an official standard although it has been adopted by the recent versions of all current major browsers.

<span class="mw-page-title-main">Jen Simmons</span> Web designer and developer

Jen Simmons is a graphic designer, web developer, educator and speaker known for her expertise in web standards, particularly HTML and CSS. She is a member of the CSS Working Group and has been prominent in the deployment of CSS grid layout. She worked as a developer advocate at Mozilla and later at Apple.

References

  1. ↑ "CSS Animations Level 1 Publication History - W3C". W3C. n.d. Retrieved 2021-04-09.
  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. Retrieved 2023-03-26.
  3. ↑ Baron, L. David; Birtles, Brian, eds. (2023-03-02). "CSS Animations Level 2". CSS Working Group Editor Drafts. Retrieved 2023-03-26.
  4. ↑ Mozilla Firefox Release Notes, The Mozilla Foundation, 2011-06-21, archived from the original on 2011-08-11, retrieved 2021-04-09{{citation}}: CS1 maint: bot: original URL status unknown (link)
  5. ↑ Hyatt, Dave (2007-10-31), "CSS Animation | WebKit", WebKit, Surfin’ Safari, retrieved 2021-04-09
  6. ↑ Jackson, Dean (2009-02-05), "CSS Animation | WebKit", WebKit, Surfin’ Safari, retrieved 2021-04-09
  7. ↑ "@keyframes rule (Internet Explorer)", Microsoft Docs, Microsoft, 2018-11-25, archived from the original on 2018-11-26, retrieved 2021-04-09
  8. ↑ Snook, Jonathan (2007-10-31), CSS Animations in Safari, Snook.ca, archived from the original on 2021-01-27, retrieved 2021-04-09
  9. ↑ Kim, Arnold (2009-02-06), CSS Animation Coming to Safari, Already in iPhone. Less Dependence on Flash?, MacRumors.com, retrieved 2021-04-09
  10. ↑ Palmer, Robert (2009-02-06), CSS Animation to replace need for Flash in MobileSafari? Not likely, The Unofficial Apple Weblog, archived from the original on 2009-02-09, retrieved 2021-04-09
  11. ↑ Ferrari, Vincent (2009-02-09), CSS Animations: A Flash Substitute?, Apple Thoughts, retrieved 2021-04-09
  12. ↑ ButtonAnimations (2019-12-11). "Button Animations CSS (w/ code)". ButtonAnimations. Retrieved 2021-04-09.
Comiclogo.svg

This communication design-related article is a stub. You can help Wikipedia by expanding it.

This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.