CSS animations

from Wikipedia, the free encyclopedia

CSS Animations is a module for Cascading Style Sheets (CSS) that enables the animation of XML elements.

history

Animations on websites based on CSS were not possible until the late 2000s. They could only be implemented through client-side scripting languages ​​such as JavaScript . In 2007, WebKit developers announced that they would enable CSS animations in Webkit browsers. In addition, it was announced in February 2009 that both implicit and explicit animations should be made possible by CSS. CSS animations are part of CSS3, a current working draft of the W3C .

syntax

The application takes place in two steps. First, an animation is defined with any number of keyframes. This is later assigned to a selector. Additional parameters such as the duration of the animation or the direction of flow can be specified. 

/*Definition einer einfachen Keyframe-Animation*/
@keyframes fade-in {
  0% {opacity: 0}
  100% {opacity: 1}
}

/*Anwendung*/
a {
  animation: fade-in 1s;
}

Browser support

As of June 2011, Firefox 5 included support for CSS animation. CSS animations have also been available since 2007 in the nightly builds of WebKit , Google Chrome , Apple Safari , Android 2.x and 3.x and the RIM OS6 web browser with the -webkit-- prefix as a module. The Internet Explorer is able to display, CSS animations Version 10th In addition, the animation module from iTunes 9 can be used to display multimedia elements of music files.

criticism

The specification of CSS animations has caused concern among proponents of JavaScript animations or, to a lesser extent, SMIL animations; others see it as a move by Apple , the main sponsor of the WebKit project, to avoid the inclusion of Adobe Flash (and the predominant Flash animations) in the iOS product line of cell phones that use the Apple Safari web browser .

swell

  1. ↑ Firefox 5 release notes. The Mozilla Foundation, June 21, 2011, accessed October 28, 2011 .
  2. ^ Dave Hyatt: CSS Animation. Surfin 'Safari, October 31, 2007, accessed October 28, 2011 .
  3. ^ Dean Jackson: CSS Animation. Surfin 'Safari, February 5, 2009, accessed October 28, 2011 .
  4. ↑ CSS Almanac: animation , accessed on July 12, 2013 (English)
  5. ↑ Jonathan Snook: CSS Animations in Safari. Snook.ca, October 31, 2007, accessed October 28, 2011 .
  6. ^ Arnold Kim: CSS Animation Coming to Safari, Already in iPhone. Less Dependence on Flash? MacRumors.com, February 6, 2009, accessed October 28, 2011 .
  7. ^ Robert Palmer: CSS Animation to replace need for Flash in MobileSafari? Not likely. The Unofficial Apple Weblog, February 6, 2009, accessed October 28, 2011 .
  8. ↑ Vincent Ferrari: CSS Animations: A Flash Substitute? Apple Thoughts, February 9, 2009, accessed October 28, 2011 .

Web links