例
アニメーションを結合<div>簡略記述特性を使用して、要素：
div
{
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
»それを自分で試してみてください 定義と使用法
アニメーションプロパティは、アニメーションプロパティの8のための簡略記述特性であります：
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
Note:常にアニメーション-durationプロパティを指定し、それ以外の期間は0で、演奏されることはありません。
| デフォルト値： | none 0 ease 0 1 normal none running |
|---|---|
| 継承されました： | no |
| アニメーション： | no. Read about animatable |
| バージョン： | CSS3 |
| JavaScriptシンタックス： | object .style.animation="mymove 5s infinite" Try it |
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
-webkit-続い番号、-moz-、または接頭辞で働いていた最初のバージョンを指定して-O-です。
| プロパティ | |||||
|---|---|---|---|---|---|
| animation | 43.0 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 9.0 4.0 -webkit- | 30.0 15.0 -webkit- 12.0 -O- |
CSSの構文
animation:name duration timing-function delay iteration-count
direction fill-mode play-state;プロパティ値
| 値 | 説明 |
|---|---|
| animation-name | あなたがセレクタにバインドするキーフレームの名前を指定します。 |
| animation-duration | アニメーションが完了するまでの秒数またはミリ秒単位で指定します |
| animation-timing-function | アニメーションの速度曲線を指定します。 |
| animation-delay | アニメーションを開始する前の遅延を指定します |
| animation-iteration-count | アニメーションが再生されるべき回数を指定します |
| animation-direction | アニメーションが交互のサイクルで逆に再生するかどうかを指定します |
| animation-fill-mode | 値は、それが実行している時間外のアニメーションによって適用されているものを指定します |
| animation-play-state | アニメーションが実行中または一時停止しているかどうかを指定します |
| initial | このプロパティがデフォルト値に設定します。 初期についての記事を読みます |
| inherit | その親要素からこのプロパティを継承します。 継承についての記事を読みます |
関連ページ
CSS3のチュートリアル： CSS3アニメーション
HTML DOMリファレンス： animation property