このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

animation-duration”プロパティ:アニメーションの所要時間CSS3で追加

記事Aug. 27th,2021
アニメーションの所要時間を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 animation-duration: 0s;
適用対象 すべての要素
継承 No
パーセント値 パーセント値は指定できません
計算値 指定した所要時間をアイテムとするリスト
アニメーション 不可

animation-duration”プロパティはanimation-name”プロパティなどで指定されたアニメーションが1回完了するのにかかる所要時間を指定するプロパティです。

サンプルコード

div { animation-duration: 10s;}

説明
<time> smsでアニメーションが1回完了するのにかかる所要時間を指定します (負の値は無効です。)
0s アニメーションは瞬時に実行され、アニメーションの最初と最後以外のフレームは効果がありません
共通キーワード

animation-duration”プロパティの値が“0s”の場合、animation-fill-mode”プロパティanimation-delay”プロパティの値によってアニメーションの対象の要素がどのように表示されるかが異なります。

animation-fill-mode”プロパティの値が“forwards”の場合
animation-delay”プロパティで指定された時間の間はアニメーションの最初のフレームが表示され、その後はアニメーションによって設定されるスタイルは適用されません。
animation-fill-mode”プロパティの値が“backwards”の場合
animation-delay”プロパティで指定された時間の間はアニメーションによって設定されるスタイルは適用されず、その後はアニメーションの最後のフレームが表示されます。
animation-fill-mode”プロパティの値が“both”の場合
animation-delay”プロパティで指定された時間の間はアニメーションの最初のフレームが表示され、その後は最後のフレームが表示されます。
animation-fill-mode”プロパティの値が“none”の場合
アニメーションは何の効果ももたらしません。アニメーションによって設定されるスタイルは適用されず、他所で設定されるスタイルだけ適用されます。

複数のアニメーションを指定する

animation-name”プロパティで複数のアニメーションが指定されている場合、値を“,(コンマ)”で区切って記述することでそれぞれのアニメーションの所要時間を指定することができます。値の順番はanimation-name”プロパティで指定した値の順番に対応します。

div {
animation-name: 〚1個目のアニメーション〛,〚2個目のアニメーション〛,〚3個目のアニメーション〛,...;
animation-duration: 〚1個目のアニメーションの所要時間〛,〚2個目のアニメーションの所要時間〛,〚3個目のアニメーションの所要時間〛,...;
}

仕様書

定義されている仕様書
Level 1
作業草稿(WD)
animation-duration
定義あり

使用例

アニメーションの所要時間を指定する

.sample-box {
animation-name: SampleAnime1;
animation-duration: 10s;
animation-iteration-count: infinite;
}

@keyframes SampleAnime1 {
0% { transform: translate(0); }
100% { transform: translate(300px); }
}
.sample-box {
animation-name: SampleAnime1;
animation-duration: 5s;
animation-iteration-count: infinite;
}

@keyframes SampleAnime1 {
0% { transform: translate(0); }
100% { transform: translate(300px); }
}
.sample-box {
animation-name: SampleAnime1;
animation-duration: 1s;
animation-iteration-count: infinite;
}

@keyframes SampleAnime1 {
0% { transform: translate(0); }
100% { transform: translate(300px); }
}

アニメーションを瞬時に実行する

.sample-box {
animation-name: SampleAnime1;
animation-duration: 0s;
animation-iteration-count: infinite;
}

@keyframes SampleAnime1 {
0% { transform: translate(0); }
100% { transform: translate(300px); }
}

複数のアニメーションを指定する

.sample-box {
animation-name: SampleAnime1, SampleAnime2;
animation-duration: 5s,10s;
animation-iteration-count: infinite, infinite;
}

@keyframes SampleAnime1 {
0% { transform: translate(0); }
100% { transform: translate(300px); }
}

@keyframes SampleAnime2 {
0% { background-color: rgb(71,209,209)} /* */
20% { background-color: rgb(170,207,83)} /* */
40% { background-color: rgb(248,184,98)} /* */
60% { background-color: rgb(211,56,28)} /* */
80% { background-color: rgb(233,84,107)} /* */
100% { background-color: rgb(180,76,151)} /* */
}
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク