CSS animation プロパティ 一覧 関数 要素 使い方・書き方 例 CSS サンプル

animation CSS プロパティとは

トピック：アニメーションCSSプロパティは、形状の変更や要素によるモーションの作成。アニメーション名、アニメーション期間、タイミング機能、遅延、反復回数、方向、塗りつぶしモード、アニメーションの様々なアニメーションの省略形プロパティ、アニメーションを作成することができる 少なくとも2つのプロパティanimation-nameとanimation-duration(0より大きい)プロパティを指定することが必要

アニメーション

animation プロパティ 値animation 内容 説明
animation 詳細 情報animation 実例 プロパティ 使い方 コードCSS animationとは、
様々なアニメーションのプロパティ名前を一括指定することができる。
animation-name 詳細 情報animation-name 実例 プロパティ 使い方 コードCSS animation-nameとは、
セレクタにバインドするキーフレームの名前を指定することができる。
animation-duration 詳細 情報animation-duration 実例 プロパティ 使い方 コードCSS animation-durationとは、
アニメーションの完了に要する秒数またはミリ秒数を指定することができる。
animation-timing-function 詳細 情報animation-timing-function 実例 プロパティ 使い方 コードCSS animation-timing-functionとは、
アニメーションの速度カーブを指定することができる。
animation-delay 詳細 情報animation-delay 実例 プロパティ 使い方 コードCSS animation-delayとは、
アニメーションを開始するまでの遅延を指定することができる。
animation-iteration-count 詳細 情報animation-iteration-count 実例 プロパティ 使い方 コードCSS animation-iteration-countとは、
アニメーションの再生回数を指定することができる。
animation-direction 詳細 情報animation-direction 実例 プロパティ 使い方 コードCSS animation-directionとは、
代替サイクルでアニメーションを逆に再生するかどうかを指定することができる。
animation-fill-mode 詳細 情報animation-fill-mode 実例 プロパティ 使い方 コードCSS animation-fill-modeとは、
実行時以外にアニメーションによって適用される値を指定することができる。
animation-play-state 詳細 情報animation-play-state 実例 プロパティ 使い方 コードCSS animation-play-stateとは、
アニメーションが実行中か一時停止中かを指定することができる。
initial 詳細 情報initial 実例 プロパティ 使い方 コードCSS initialとは、
このプロパティをデフォルト値に設定することができる。
inherit 詳細 情報inherit 実例 プロパティ 使い方 コードCSS inheritとは、
親要素からこのプロパティを継承することができる。

プロパティ 定義と使用法

デフォルト値・初期値 :
適用対象 :全要素、::before / ::after 疑似要素
継承 :不可
メディア :visual
計算値 :
CSS Version CSS3
アニメーションの種類 :個別
JavaScript 構文 object.style.animation="funWebref"
正規順序 :形式文法における値の出現順
CSSの構文animation: name, duration, timing-function, delay, iteration-count, direction, fill-mode, play-state;

サポートするデスクトップ ブラウザ対応・互換性

PropertyDesktop 互換性
animationChromeEdgeFirefoxInternet ExplorerOperaSafari
基本 サポートフルサポート◯ 43フルサポート◯ 12フルサポート◯ 16フルサポート◯ 10フルサポート◯ 30フルサポート◯ Yes

サポートするモバイル ブラウザ対応・互換性

PropertyMobile 互換性
animationAndroidChrome for Android
Edge MobileFirefox for Android
Opera for Android
iOS SafariSamsung Internet
基本 サポートフルサポート◯ Yesフルサポート◯ 43フルサポート◯ Yesフルサポート◯ 16フルサポート◯ 30フルサポート◯ Yesフルサポート◯ 4.0
CSS animation プロパティ 一覧 関数 要素 使い方・書き方 例 CSS サンプル
CSS animation プロパティ 一覧 | 使い方 | 書き方 | サンプル | セレクタ 値 | 属性 入門 | CSS マニュアル – WebRef
あわせて読みたい

Html

Glossary

PHP

JavaScript

JQuery