animation
CSS の animation
一括指定プロパティは、スタイル間のアニメーションを適用します。これは animation-name
, animation-duration
, animation-timing-function
, animation-delay
, animation-iteration-count
, animation-direction
, animation-fill-mode
, animation-play-state
の一括指定です。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;
/* @keyframes duration | name */
animation: 3s slidein;
アニメーションできるプロパティの説明があります。この説明は言うまでもなく CSS トランジションにも有効です。
初期値 | 一括指定の次の各プロパティとして
|
---|---|
適用対象 | すべての要素、::before / ::after 擬似要素 |
継承 | なし |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | 離散値 |
構文
animation
プロパティは1つまたはコンマで区切った複数のアニメーションとして指定します。
それぞれ個別のアニメーションは以下のように定義されます。
- 以下の値は0~1回出現します。
- アニメーションの名前は任意で、
none
,<custom-ident>
,<string>
のいずれかになります。 - 0~2回の
<time>
の値
各アニメーションの定義の中での順序は重要です。<time>
として解釈される最初の値は、 animation-duration
に、そして2番目の値は、animation-delay
に割り当てられます。
順序はまた、各アニメーションの定義において、他のキーワードから animation-name
の値を区別するためにも重要です。 animation-name
以外のプロパティの値として解釈することが可能なキーワードは、一括指定の以前にそれらのプロパティの値が見つかっていないのならば、 animation-name
ではなく、それらのプロパティの値として取り扱われます。また、シリアライズされる場合には、他のプロパティの既定値は少なくとも、他のプロパティの値と解釈することも可能な animation-name
と区別する必要がある場合には出力する必要があり、他の場合には出力してもいいことになっています。
値
<single-animation-iteration-count>
- アニメーションが実行される回数です。
animation-iteration-count
で利用できる値の一つでなければなりません。 <single-animation-direction>
- アニメーションが実行される方向です。
animation-direction
で利用できる値の一つでなければなりません。 <single-animation-fill-mode>
- アニメーションの実行の前後にどのようにスタイルが適用されるかを定めます。
animation-fill-mode
で利用できる値の一つでなければなりません。 <single-animation-play-state>
- アニメーションが実行中かどうかを定めます。
animation-play-state
で利用できる値の一つでなければなりません。
構文形式
<single-animation>#ここで
<single-animation> = <time> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]
ここで
<easing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>
<single-animation-iteration-count> = infinite | <number>
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
<single-animation-fill-mode> = none | forwards | backwards | both
<single-animation-play-state> = running | paused
<keyframes-name> = <custom-ident> | <string>ここで
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(
[0,1]>, <number>, [0,1]>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)ここで
<step-position> = jump-start | jump-end | jump-none | jump-both | start | end
例
台風の目
<div class="view_port">
<div class="polling_message">
Listening for dispatches
</div>
<div class="cylon_eye"></div>
</div>
.polling_message {
color: white;
float: left;
margin-right: 2%;
}
.view_port {
background-color: black;
height: 25px;
width: 100%;
overflow: hidden;
}
.cylon_eye {
background-color: red;
background-image: linear-gradient(to right,
rgba(0, 0, 0, .9) 25%,
rgba(0, 0, 0, .1) 50%,
rgba(0, 0, 0, .9) 75%);
color: white;
height: 100%;
width: 20%;
-webkit-animation: 4s linear 0s infinite alternate move_eye;
animation: 4s linear 0s infinite alternate move_eye;
}
@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; } }
@keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; } }
これ以外の例は CSS アニメーションを参照してください。
アクセシビリティの考慮事項
点滅を伴うアニメーションは、注意欠陥障害 (ADHD) のような認知障害を持つ人々に問題を起こす可能性があります。加えて、特定の種類の動きが、前庭障害、てんかん、片頭痛、痙攣感受性などの引き金になることもあります。
アニメーションを停止したり無効にしたりする仕組みを、できれば Reduced Motion Media Query を使用して、アニメーションがない操作の設定を表明したユーザーの希望を叶えるように作成することができます。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Animations Level 1 animation の定義 |
草案 | 初回定義 |
ブラウザーの対応
BCD tables only load in the browser
Quantum CSS のメモ
- Gecko には、画面上でオフスクリーン要素をアニメーションさせたとき、遅延を指定すると、 Windows など一部のプラットフォームで再描画しないというバグがあります (バグ 1383239)。これは Firefox の新しい並列 CSS エンジン(Quantum CSS または Stylo と呼ばれており、 Firefox 57 でリリースする計画です)で修正されています。
- 他の Gecko のバグとして、
<details>
要素がopen
属性を使用しても、アニメーションが有効になっていると既定で開かないというものがあります (バグ 1382124)。 Quantum CSS では修正されています。 - さらに他のバグとして、 em の単位を使用してアニメーションする要素の親の
font-size
を変更しても影響されないというものがあります (バグ 1254424)。 Quantum CSS では修正されています。
関連情報
- CSS アニメーションの使用
- JavaScript
AnimationEvent
API