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

2018-06-15 css-reference

ページコンテンツ

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

`animation duration` CSS プロパティとは

トピック：アニメーション周期は、アニメーションが1サイクルを完了するのに要する秒数またはミリ秒数を指定する事ができる

プロパティ `animation duration`

実例コード 1

サンプルコードを試す

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

プロパティ定義と使用法

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

プロパティ値

値	説明
`time`	アニメーションが1サイクルを完了するのにかかる時間の長さを指定するこれは、秒またはミリ秒で指定できます。デフォルト値は0です。つまり、アニメーションは発生しない
`initial`	このプロパティをデフォルト値に設定する
`inherit`	親要素からこのプロパティを継承する

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

Property	Desktop 互換性
animation duration	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
基本サポート	フルサポート◯43	フルサポート◯12	フルサポート◯16	フルサポート◯10	フルサポート◯30	フルサポート◯4

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

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

：animation-duration 関連記事

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

タグ:

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