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

animation CSS プロパティとは

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

アニメーション

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