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

2018-06-16 css-reference

ページコンテンツ

▼animation-iteration-countCSS プロパティとは
▼ プロパティアニメーション反復回数
▼実例コード 1
▼プロパティ定義と使用法
▼プロパティ値
▼サポートするデスクトップブラウザ対応・互換性
▼サポートするモバイルブラウザ対応・互換性

`animation-iteration-count` CSS プロパティとは

トピック：停止する前にアニメーションサイクルを再生する回数を指定することができる

プロパティアニメーション反復回数

実例コード 1

サンプルコードを試す

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

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

プロパティ定義と使用法

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

プロパティ値

値	説明
`number`	アニメーションの再生回数（繰り返す回数）を定義する数値。負の値は使用できないデフォルト値は1
`infinite`	アニメーションを無限に（永遠に）再生するように指定・繰り返される
`initial`	このプロパティをデフォルト値に設定する
`inherit`	親要素からこのプロパティを継承する

animation-iteration-countプロパティは、アニメーションサイクルが停止する前に再生される回数を指定する複数の値が指定されている場合、リストの次の値はアニメーションが再生されるたびに使用され、最後の値が使用されると最初の値が使用される

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

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

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

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

：animation-iteration-count 関連記事

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

タグ:

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