Loading article…
| CSS アニメーション レベル 1 | |
ホバー効果を使用したインタラクティブな SVG | |
| 略語 | CSSアニメーション1 |
|---|---|
| ネイティブ名 | CSSアニメーション |
| 状態 | W3C ワーキングドラフト |
| 初版 | 2009年3月20日[1] |
| 最新バージョン | レベル1 2023年3月2日[2] |
| プレビュー版 | レベル2 2023年3月2日[3] |
| 組織 | ワールドワイドウェブコンソーシアム |
| 委員会 | CSSワーキンググループ |
| 編集者 |
|
| 基本基準 | CS |
| ドメイン | CS |
| Webサイト | www.w3.org/TR/css-animations-1/ |
CSS アニメーションは、 CSS を使用してHTMLドキュメント要素のアニメーションを可能にする、カスケーディング スタイル シート用の提案されたモジュールです。
歴史
疑似クラスは:hover長年、基本的なアニメーションを生成するために使用されてきましたが、CSS のアニメーション領域への拡張は 2000 年代後半までほとんど行われていませんでした。2007 年の早い時期に、WebKit はCSS アニメーション、トランジション、および変換を WebKit の機能として組み込む意向を発表しました。また、2009 年 2 月には、CSS による暗黙的および明示的なアニメーションの実装も発表しました。CSS アニメーションは、 World Wide Web Consortium (W3C)が管理する進行中のドラフト仕様である CSS3 の機能としても提案されています。
現在
CSS アニメーションは、カスケーディング スタイル シートのモジュールです。これにより、ユーザーはオブジェクトの上にマウスを移動するとアニメーションが再生されます。現在、すべての主要な検索エンジンで採用されています。Javascript によるアニメーションを好む人々からの論争にもかかわらず、ホバー タグは現在、カスケーディング スタイル シート コミュニティ全体で広く使用されています。
スケーラブルベクターグラフィックス
hoverに加えて、Scalable Vector Graphics は@keyframes @ ルールをサポートしており、限られた一連の変換をアニメーション化できます。Firefox と Chrome は、@keyframesが CSS 3 仕様に追加される前は、それぞれ@-moz-keyframesと@-webkit-keyframes拡張機能を使用していました。[2]
ブラウザのサポート
2011年6月現在、Firefox 5にはCSSアニメーションのサポートが含まれています。[4] CSSアニメーションは、WebKitのナイトリービルドのモジュールとしても利用可能であり、Google Chrome、Safari 4と5、iOS版Safari （iPhone、iPod Touch、iPad）、Androidバージョン2.xと3.x、Internet Explorer 10以降、Microsoft Edgeブラウザ、BlackBerry OS 6ウェブブラウザでも-webkit-プレフィックス付きで提供されています。[5] [6] [7]また、 iTunes 9でもiTunes LPファイルのサポートに使用されています。
論争
CSSアニメーションの開発当初は、JavaScript [8]や、それほど使われていないがSynchronized Multimedia Integration Language (SMIL) によるアニメーションを好む人々から懸念を招いていました。また、WebKitプロジェクトの主要スポンサーであるApple社が、 Safariを使用する同社のiOSラインのモバイルデバイスにAdobe Flash（および現行のFlashアニメーション）を組み込むのを回避するための動きであると主張する人もいます。[9] [10] [11]さらに、CSSは比較的使いやすいプログラミング言語ですが、多くのプログラマーがまだアニメーションの作成に苦労しています。この問題により、いくつかの個人やウェブサイトが、ユーザーがコピーできるコードを含むオープンソースのCSSボタンアニメーションを開発および作成しました[12]。しかし、これらの以前の論争にもかかわらず、CSSアニメーションは主にインターネット上で見つけられ、広く使用されています。
参照
参考文献
- ^ 「CSS アニメーション レベル 1 出版履歴 - W3C」。W3C . nd . 2021 年 4 月 9 日閲覧。
- ^ abc Jackson, Dean; Baron, L. David; Atkins Jr., Tab; Birtles, Brian; Hyatt, David; Marrin, Chris; Galineau, Sylvain, 編 (2023-03-02). 「CSS アニメーション レベル 1」。W3C . CSS ワーキング グループ. 2023-03-26に取得。
- ^ Baron, L. David; Birtles, Brian, 編 (2023-03-02). 「CSS アニメーション レベル 2」。CSSワーキング グループ エディター ドラフト。2023-03-26に取得。
- ^ Mozilla Firefox リリースノート、Mozilla Foundation、2011-06-21、2011-08-11 にオリジナルからアーカイブ、2021-04-09 に取得
{{citation}}: CS1 maint: bot: 元の URL ステータス不明 (リンク) - ^ Hyatt, Dave (2007-10-31)、「CSS Animation | WebKit」、WebKit、Surfin' Safari 、 2021-04-09取得
- ^ Jackson, Dean (2009-02-05)、「CSS Animation | WebKit」、WebKit、Surfin' Safari 、 2021-04-09取得
- ^ 「@keyframes ルール (Internet Explorer)」、Microsoft Docs、Microsoft、2018-11-25、2018-11-26 にオリジナルからアーカイブ、2021-04-09 に取得
- ^ Snook, Jonathan (2007-10-31)、Safari の CSS アニメーション、Snook.ca、2021-01-27 にオリジナルからアーカイブ、2021-04-09取得
- ^ Kim, Arnold (2009-02-06)、CSS アニメーションが Safari に登場、iPhone にはすでに搭載。Flash への依存は減少か?、MacRumors.com 、2021-04-09取得
- ^ Palmer, Robert (2009-02-06)、MobileSafari で CSS Animation が Flash の代わりになる? 可能性は低い、The Unofficial Apple Weblog、2009-02-09 のオリジナルからアーカイブ、 2021-04-09取得
- ^ Ferrari, Vincent (2009-02-09)、CSS アニメーション: Flash の代替品?、Apple Thoughts 、 2021-04-09取得
- ^ ButtonAnimations (2019-12-11). 「ボタンアニメーション CSS (コード付き)」. ButtonAnimations . 2021-04-09閲覧。
外部リンク
- アップルの最初の提案
- CSSアニメーションの例
- CSS アニメーションの使い方を学ぶ - 実践的な例付き
- CSS アニメーション ジェネレーター