From 5c799c31c2746db780a6330be5ce714c8f676f4f Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 30 Dec 2021 23:18:47 +0900 Subject: CSS Transitions のプロパティを変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/transition/index.md | 140 +++++++++++++++++++++++++++++++++++ 1 file changed, 140 insertions(+) create mode 100644 files/ja/web/css/transition/index.md (limited to 'files/ja/web/css/transition/index.md') diff --git a/files/ja/web/css/transition/index.md b/files/ja/web/css/transition/index.md new file mode 100644 index 0000000000..a260f7e864 --- /dev/null +++ b/files/ja/web/css/transition/index.md @@ -0,0 +1,140 @@ +--- +title: transition +slug: Web/CSS/transition +tags: + - CSS + - CSS Property + - CSS Transitions + - CSS プロパティ + - CSS トランジション + - Reference + - recipe:css-shorthand-property +translation_of: Web/CSS/transition +--- +
{{CSSRef}}
+ +

transition は CSS のプロパティで、 {{cssxref("transition-property")}}、 {{cssxref("transition-duration")}}、 {{cssxref("transition-timing-function")}}、 {{cssxref("transition-delay")}} の一括指定プロパティです。

+ +
{{EmbedInteractiveExample("pages/css/transition.html")}}
+ +

トランジション (transition) は、要素の 2 つの状態間の変化を定義するためのものです。それぞれの状態は {{cssxref(":hover")}} や {{cssxref(":active")}} のような擬似クラスで定義されたり、 JavaScript を使用して動的に設定されたりします。

+ +

構成要素のプロパティ

+ +

このプロパティは以下の CSS プロパティの一括指定です。

+ + + +

構文

+ +
/* 1つのプロパティへの適用 */
+/* プロパティ名 | 時間 */
+transition: margin-right 4s;
+
+/* プロパティ名 | 時間 | 遅延 */
+transition: margin-right 4s 1s;
+
+/* プロパティ名 | 時間 | イージング関数 */
+transition: margin-right 4s ease-in-out;
+
+/* プロパティ名 | 時間 | イージング関数 | 遅延 */
+transition: margin-right 4s ease-in-out 1s;
+
+/* 2つのプロパティへの適用 */
+transition: margin-right 4s, color 1s;
+
+/* 変化するすべてのプロパティへの適用 */
+transition: all 0.5s ease-out;
+
+/* グローバル値 */
+transition: inherit;
+transition: initial;
+transition: unset;
+
+ +

transition プロパティは、 1 つまたは複数の単体プロパティによるトランジションを、コンマで区切って指定します。

+ +

それぞれの単体プロパティのトランジションでは、単体のプロパティ (または特別な値である all および none) に適用されるトランジションを記述します。記述は以下の通りです。

+ + + +

プロパティ値の一覧が同じ長さではない場合については、プロパティ値のリストの長さが異なる場合を参照してください。つまり、実際にアニメーション化されているプロパティの数を超える余分なトランジションの記述は無視されます。

+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

単純な例

+ +

この例では、ユーザーが要素の上にカーソルを置いたときに、 1 秒間の遅延をつけて 4 秒間でフォントサイズの遷移を行います。

+ +

HTML

+ +
<a class="target">Hover over me</a>
+ +

CSS

+ +
.target {
+  font-size: 14px;
+  transition: font-size 4s 1s;
+}
+
+.target:hover {
+  font-size: 36px;
+}
+
+ +

{{EmbedLiveSample('Simple_example', 600, 100)}}

+ +

CSS transitions の記事に、 CSS トランジションの例がいくつかあります。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Transitions', '#transition-shorthand-property', 'transition') }}{{ Spec2('CSS3 Transitions') }}初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("css.properties.transition")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf