このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
<animate>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
<animate> は SVG の要素で、時間の経過に応じて要素の属性を変化させる方法を提供します。
使用コンテキスト
| カテゴリー | アニメーション要素 |
|---|---|
| 許可されている内容 | 任意の数、任意の順序の以下の要素。 説明的要素 |
属性
この要素にはグローバル属性のみがあります。
DOM インターフェイス
この要素は SVGAnimateElement インターフェイスを実装しています。
例
html,
body,
svg {
height: 100%;
margin: 0;
padding: 0;
}
html
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
<rect width="10" height="10">
<animate
attributeName="rx"
values="0;5;0"
dur="10s"
repeatCount="indefinite" />
</rect>
</svg>
[フレーム]
アクセシビリティの考慮
点滅や発光のアニメーションは、注意欠陥障碍 (ADHD) のような認知障碍を持つ人にとって問題になることがあります。加えて、このような動きは、前庭障害、てんかん、偏頭痛、光感受性障害の引き金になる可能性があります。
アニメーションを一時停止したり無効にしたりする仕組みを提供したり、動き軽減メディアクエリーまたは同様のユーザーエージェントクライアントヒントである Sec-CH-Prefers-Reduced-Motion を使用して、アニメーションなしの利用を設定したユーザーに適した利用方法を作成するようにすることを検討してください。
仕様書
| Specification |
|---|
| SVG Animations Level 2 # AnimateElement |
ブラウザーの互換性
Enable JavaScript to view this browser compatibility table.