CSS animation-play-state| CSS:スタイルシート関数要素使い方・書き方例 CSS サンプル

2018-06-16 css-reference

ページコンテンツ

▼animation-play-stateCSS プロパティとは
▼ プロパティ animation-play-state
▼実例コード 1
▼プロパティ定義と使用法
▼プロパティ値
▼サポートするデスクトップブラウザ対応・互換性
▼サポートするモバイルブラウザ対応・互換性

`animation-play-state` CSS プロパティとは

トピック：アニメーションが再生中か一時停止中かを指定することができる

プロパティ `animation-play-state`

実例コード 1

サンプルコードを試す

.webref {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: webref;
-webkit-animation-duration: 2s;
-webkit-animation-play-state: paused;
/* Standard syntax */
animation-name: webref;
animation-duration: 2s;
animation-play-state: paused;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes webref {
from {left: 0;}
to {left: 50%;}
}
/* Standard syntax */
@keyframes webref {
from {left: 0;}
to {left: 50%;}
}

アニメーションのプロパティすべてを一度に設定するには、一括指定プロパティである animation プロパティを使用すると便利。

プロパティ定義と使用法

デフォルト値・初期値 :	`running`
適用対象 :	全要素、`::before` / `::after` 疑似要素
継承 :	不可
メディア :	visual
計算値 :	指定値
`CSS Version`	`CSS3`
アニメーションの種類 :	個別
JavaScript 構文	object.style.animationPlayState="funWebref"
正規順序 :	形式文法で定義される一意のあいまいでない順序
CSSの構文	`animation-play-state: paused \|running \|initial \|inherit;`

プロパティ値

値	説明
`paused`	アニメーションが一時停止することを指定する
`running`	デフォルト値。アニメーションが実行中であることを指定する
`initial`	このプロパティをデフォルト値に設定する
`inherit`	親要素からこのプロパティを継承する

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

Property	Desktop 互換性
animation-play-state	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
基本サポート	フルサポート◯43	フルサポート◯12	フルサポート◯16	フルサポート◯10	フルサポート◯30	フルサポート◯あり

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

Property	Mobile 互換性
animation-play-state	Android	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
基本サポート	フルサポート◯43	フルサポート◯43	フルサポート◯あり	フルサポート◯16	フルサポート◯30	フルサポート◯あり	フルサポート◯4.0

：animation-play-state 関連記事

CSS animation-play-state| CSS:スタイルシート関数要素使い方・書き方例 CSS サンプル — CSS animation-play-state | CSS プロパティ値| 意味使い方実例 – WebRef

タグ:

#CSS アニメーション
#CSS プロパティ