CSS animace - CSS animations

Kaskádové styly
Koncepty
Filozofie
Nástroje
Srovnání

CSS animace je navrhovaný modul pro Kaskádové styly který umožňuje animace z HTML prvky dokumentu pomocí CSS.

Dějiny

Zatímco pseudotřída :vznášet se byl používán pro generování primitivní animace po celá léta, rozšíření CSS do říše animace byly minimální až do pozdní dekády 2000s. Již v roce 2007 WebKit oznámil svůj záměr zahrnout animaci CSS, přechody a transformace jako funkce WebKit. V únoru 2009 také oznámila implementaci implicitní i explicitní animace prostřednictvím CSS. Animace CSS byla také představena jako rys CSS3, probíhajícího návrhu specifikace, který spravuje World Wide Web Consortium (W3C).


Proud

Interaktivní SVG používat vznášet se účinek

CSS Animations je modul kaskádových stylů. Umožňuje uživatelům umístit kurzor na objekty a přehraje se animace. V současné době je přijat všemi hlavními vyhledávači. Navzdory kontroverzi mezi těmi, kteří dávají přednost animaci pomocí Javascriptu, je značka hover nyní široce používána v komunitě kaskádových stylů.

Škálovatelná vektorová grafika

Animovaný SVG pomocí CSS 3
Hlavní článek: Animace SVG § SVG_animation_using_CSS

Navíc vznášet se, Škálovatelná vektorová grafika podporuje @keyframes at-rule, což umožňuje animaci omezené sady transformací. Firefox a Chrome používaly @ -moz-keyframes a @ -webkit-keyframes rozšíření @keyframes byl přidán do specifikace CSS 3.[1]

Podpora prohlížeče

Od června 2011 obsahuje Firefox 5 podporu animací CSS.[2] Animace CSS je také k dispozici jako modul v nočních verzích WebKit a také Google Chrome, Safari 4 a 5 a Safari pro iOS (iPhone, iPod Touch, iPad), Android verze 2.xa 3.x, internet Explorer 10+ a Microsoft Edge prohlížeč, webový prohlížeč BlackBerry OS 6, s -webkit- předpona.[3][4][5] Používá se také v iTunes 9 na podporu iTunes LP soubory.

Kontroverze

Na začátku vývoje animace CSS vzbudil zájem těch, kteří preferují animaci prostřednictvím JavaScript[6] nebo v méně používaném rozsahu Synchronizovaný jazyk integrace multimédií (SMIL); jiní tvrdili, že jde o krok od Apple Inc., hlavní sponzor projektu WebKit, aby se vyhnul zahrnutí Adobe Flash (a úřadující Flash animace ) na společnost iOS řada mobilních zařízení, která používají Safari.[7][8][9] Přestože je kaskádové šablony stylů poměrně snadno použitelný programovací jazyk, mnoho programátorů stále bojuje s vytvářením animací. S tímto problémem několik jednotlivců a webů vyvinulo a vytvořilo animace tlačítek CSS s otevřeným zdrojovým kódem s kódem[10] pro uživatele ke kopírování. I přes tyto předchozí diskuse však lze animace CSS převážně nalézt a široce používat na internetu.

Viz také

Reference

  1. ^ http://w3.org/TR/css-animations-1
  2. ^ Poznámky k verzi Firefoxu 5 „Nadace Mozilla, 21. 6. 2011
  3. ^ Hyatt, Dave (2007-10-31), Animace CSS „Surfin“ Safari
  4. ^ Jackson, Dean (02.02.2009), Animace CSS „Surfin“ Safari
  5. ^ pravidlo klíčových snímků, Microsoft, 25. 11. 2018
  6. ^ Snook, Jonathan (2007-10-31), Animace CSS v Safari, Snook.ca
  7. ^ Kim, Arnold (06.02.2009), Animace CSS přichází na Safari, již v iPhone. Méně závislosti na blesku?, MacRumors.com
  8. ^ Palmer, Robert (06.02.2009), CSS Animation nahradí potřebu Flash v MobileSafari? Nepravděpodobně, Neoficiální Apple Weblog
  9. ^ Ferrari, Vincent (09.02.2009), Animace CSS: Náhradník Flash?, Apple Thoughts
  10. ^ Animace tlačítek s kódem

externí odkazy